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Christophe Porteneuve ”从事 IT 研发 十 多 年 ， 
并 很 早 就 专注 于 Web 开 发 。2006 年 成 为 Prototype 
( http://prototypejs.org ) 的 核心 成 员 ，2007 年 写作 
了 Prototype and script.aculo.us 一 书 。 目前， 他 是 
法 国 Ciblo.net 的 CTO， 并 常 在 JavaScript 的 会 议 中 做 
演讲 。 他 和 妻子 Elodie 现 住 在 法 国 巴黎 。 





巩 朋 本 科 毕 业 于 大 连理 工大 学 ， 现 为 北京 航空 航 
天 大 学 计算 机 系 在 读 硕士 。 喜 好 读书 ， 涉 猎 领 域 很 
广 ， 尤 其 喜欢 钻研 程序 设计 语言 理论 。 个 人 博客 为 
http:/www.cnblogs.com/figure9。 


ER ”本科 毕业 于 北京 航空 航天 大 学 ， 现 在 该 校 计 
算 机 系 攻 读 硕士 。 拥 有 丰富 的 Web 前 端 开发 经 验 和 
扎实 的 编程 理论 基础 ， 对 函数 式 程 序 设 计 语言 有 浓 
厚 的 兴趣 。 
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内 容 提 要 











本 书 是 JavaScript 的 实战 秘籍 。 作 者 将 自己 多 年 的 编程 经 验 融入 其 中 ， 不 仅 可 以 作为 学 习 之 用 ， 更 是 
日 常 JavaScript 开发 中 不 可 多 得 的 参考 手册 ， 使 读者 少 走 很 多 弯路 。 
本 书 的 内 容 涵盖 了 当今 流行 的 JavaScript 库 的 运行 机 制 ， 也 提供 了 许多 应 用 案例 。 本 书 针对 各 任务 采 




















取 对 页 式 编 排 ， 在 对 各 任务 的 讲解 中 ， 左 页 解释 了 任务 的 实现 原理 











及 可 供 对 照 参考 的 相关 任务 ， 便 于 读者 阅读 和 理解 。 




















， 而 右 页 则 举 出 了 该 任务 的 代码 片段 以 


本 书 的 读者 既 包 括 JavaScript 编程 的 新 手 ， 也 包括 已 有 不 少 Web 应 用 编程 经 验 的 开发 者 。 
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谨 以 此 书 献 给 Elodie 





我 最 爱 的 妻子 。 


随 着 互联 网 的 发 展 和 移动 上 网 设备 数量 的 急剧 增长 , 直接 和 用 户 打交道 的 网 站 前 端 变 得 越 来 
越 重要 。 而 JavaScript 作为 前 端 开发 的 首选 语言 ， 其 重要 性 不 言 而 喻 。 


关于 JavaScript 的 好 书 已 有 很 多 : 入 门 级 的 有 Jeremy Keith 等 人 著 的 DOM Scriptine”， 进 阶 
级 的 有 Nicholas Zakas 的 Professional JavaScript for Web Developers®#1 Douglas Crockford 的 
JavaScript: The Good Parts? 。 不 过 ， 对 于 前 端 开 发 来 说 ， 仅 仅 学 习 JavaScript 这 门 语言 是 远 远 不 
够 的 。 正 如 本 书 作 者 所 言 , 使 用 原始 的 JavaScript 编写 网 站 前 端 就 像 用 石竹 和 原木 来 建造 一 座 摩 
RAE: 即便 构建 一 个 简单 的 Web 应 用 ，DOM 中 的 不 一 致 、 训 览 器 兼容 性 问题 以 及 JavaScript 
语言 本 身 存在 的 问题 也 会 使 它 变 得 诡异 莫 测 。 


本 书 作者 从 实用 性 出 发 , 把 前 端 开发 中 的 常见 问题 归纳 为 一 个 个 任务 , 给 出 了 常用 框架 下 实 
现 这 些 任务 的 方法 和 注意 事项 。 这 些 任务 的 覆盖 面 很 广 ， 从 JavaScript 语言 的 基本 技巧 , 到 DOM 
操纵 、 事 件 和 定时 器 ， 再 到 UI 技巧 ， 黄 至 还 包含 现在 流行 的 混搭 (Mashup) 技术 。 读 者 既 可 以 
把 这 本 书 作为 JavaScript 开发 的 快速 参考 手册 ， 也 可 以 通读 本 书 ， 以 深入 理解 JavaScript 和 各 个 
流行 框架 的 使 用 方法 。 

本 书 第 一 部 分 、 第 二 部 分 和 附录 由 巩 朋 翻 译 ， 甚 余部 分 则 由 张 铁 完 成 。 我 们 已 尽力 保证 译文 
准确 、 通 顺 ， 但 限于 自身 的 程序 设计 能 力 和 文字 表达 水 平 ， 难 免 有 所 遗漏 ， 希 望 读者 在 容忍 的 同 
时 能 够 给 予 指正 。 














译 者 
2011 年 8 月 











O 此 书 中 文 版 《JavaScript DOM 编程 艺术 (第 2 版 )》 已 由 人 民 邮 电 出 版 社 出 版 。* ( 标 * 号 的 是 译 者 注 ， 下 同 。) 
© 此 书 中 文 版 《JavaScript 高 级 程序 设计 (第 2 版 )》 已 由 人 民 邮 电 出 版 社 出 版 。* 
@ 此 书 中 文 版 《JavaScript 编程 精粹 》 已 由 电子 工业 出 版 社 出 版 。* 






















































































对 本 书 的 赞誉 


“真希 望 我 初学 JavaScript 那 会 就 能 有 这 本 书 ! 本 书 会 让 你 在 现实 的 JavaScript 世界 中 游 丸 有 
。 它 既 讲述 了 当今 流行 的 JavaScript 库 的 运行 原理 ， 也 提供 了 JavaScript 正确 实践 的 好 建议 和 
背景 资料 。 作 为 最 优秀 的 JavaScript 开发 者 之 一 ， 作 者 将 他 多 年 的 宝贵 经 验 凝聚 在 本 书 中 ， 使 它 
成 为 日 常 JavaScript 开发 中 的 必 读 参 考 。” 








» 





LL 


—— Thomas Fuchs 


script.aculo.us 框架 创始 人 


“这 本 书包 含 了 一 系列 当今 浏览 器 中 既 精 妙 又 实用 的 JavaScript 贴 士 和 技巧 , 既 有 表单 验证 和 
JSON 处 理 这 样 的 基本 技术 ， 也 有 混搭 和 几何 定位 这 样 的 应 用 实例 。 如 果 你 想 使 用 JavaScript 编 
写 更 优秀 的 Web 应 用 ， 我 强烈 建议 你 阅读 本 书 。 








—— Dylan Schiemann 


SitePen 公司 CEO, Dojo 工具 箱 联 合 创始 人 


“现在 市 面 上 充斥 着 大 量 关 于 JavaScript 的 书 ,不 过 这 些 书 大 多 都 面向 那些 刚 入 门 或 是 缺乏 经 
验 的 JavaScript 程序 员 。 而 本 书 并 非 如 此 ， 这 本 实用 手册 可 谓 出 类 拔 萃 。 如 果 你 是 一 个 初学 者 ， 
先 去 看 些 基础 的 书 ， 等 你 具备 一 定 经 验 后 再 读本 书 ， 效 果 会 更 好 ， 如 果 你 已 经 编写 过 不 少 
JavaScript 代码 ， 你 会 在 这 本 书 中 发 现 一 系列 你 听 过 或 见 过 的 技术 ， 但 是 本 书 会 让 你 真正 用 好 这 
些 技术 。 总 之 ， 本 书 值得 一 读 。 

















一 一 Stuart Langridge 
kryogenix.org, @sil 
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只 要 你 在 过 去 几 年 中 对 JavaScript 有 一 丁点 留意 ， 你 就 会 听 过 这 个 说 法 : JavaScript 将 会 是 下 
一 个 重量 级 语言 。 这 个 曾经 被 用 于 半成品 实现 和 滚动 信息 展示 的 语言 ， 如 今 已 经 演进 为 一 个 世界 
级 的 、 面 向 对 象 的 动态 语言 ， 无 论 是 在 客户 端 还 是 在 服务 器 端 ， 都 有 超 高 速 的 实现 。 


一 方面 ，JavaScript 的 设计 者 通过 EcmaScript 5 (ES5) 标准 为 JavaScript 注入 了 新 鲜 健康 的 
血液 ， 另 一 方面 ， 各 种 强大 的 JavaScript 引擎 (比如 V8, JavaScriptCore, SpiderMonkey, Rhino 
和 Carakan) 以 及 不 断 涌现 的 标准 和 技术 (在 这 方面 ，CommonJS 和 Node 处 于 领先 地 位 )， 使 
JavaScript 既 适 合 在 浏览 器 端 工作 ， 也 适合 独立 在 服务 器 端 构 建 强大 的 架构 。 其 至 连 微软 最 新 推 
出 的 Internet Explorer 9 也 大 幅 提 高 了 JavaScript 的 运行 速度 。 


JavaScript 不 仅仅 是 一 门 强大 的 动态 语言 ， 而 且 是 一 个 庞大 的 生态 系统 ， 这 个 系统 由 它 的 开 
发 工具 、 基 础 设施 、 框 架 和 工具 箱 构 成 。JavaScript 功能 全 面 ， 易 于 编写 ， 适 用 于 各 种 编程 任务 ， 
尤其 是 那些 基于 Web 的 应 用 和 服务 。 


是 时 候 进 入 JavaScript 的 世界 了 ! 
本 书 内容 和 读者 对 象 


本 书 并 没有 打算 从 语言 的 角度 来 讲解 JavaScript。 首 先 ，JavaScript 的 语法 并 不 复杂 ， 只 要 你 
拥有 一 些 主流 编程 语言 的 经 验 一 一 哪怕 只 了 解 基本 的 概念 (诸如 变量 、 循 环 等 )， 就 已 经 足够 了 。 
本 书 并 不 需要 你 拥有 JavaScript 的 经 验 (当然 有 的 话 会 更 好 )， 更 不 要 求 你 是 编程 专家 。 


事实 上 ， 如 果 你 打算 研究 JavaScript 的 语言 精髓 或 是 核心 技术 细节 ， 那 最 好 还 是 去 读 一 些 专 
门 的 材料 ，Opera 提供 的 Web 标准 课程 中 的 “JavaScript 核心 技能 ”部 分 就 很 不 错 ”。 如 果 你 需要 















































© 参见 http://commonjs.org/。 
© 参见 http://nodejs.org/。 
© 参见 http://www.opera.com/company/education/curriculum/。 


2 区 引 言 





了 解 更 复杂 的 语言 实现 细节 ， 则 可 以 去 参考 官方 的 语言 标准 ， 或 是 阅读 那些 圣经 级 的 大 部 头 ， 比 
如 David Flanagan 的 JavaScript; The Definitive Guide® , 


针对 常见 的 客户 端 JavaScript 任务 , 本 书 提供 了 快捷 且 定 性 的 解决 方案 , 这 些 任务 从 简单 ( 比 
如 获取 一 个 DOM 元 素 的 引用 ) 到 复杂 (比如 基于 Ajax 的 自动 完成 )。 这 也 意味 着 我 们 需要 使 用 
JavaScript, CSS, DOM, Ajax, JSON 等 技术 。 本 书 绝 大 部 分 在 讲 客户 端 (浏览 器 端 ) 技术 ， 服 
务 器 端的 内 容 则 很 少 。 为 了 便于 说 明 ， 本 书 也 用 了 一 些 PHP 脚本 ， 不 过 你 可 以 使 用 你 喜欢 的 技 
术 ， 比 如 通过 Node 用 JavaScript 编写 服务 器 端 程序 ! 


不 要 直接 照搬 本 书 中 的 代码 。 本 书 每 个 任务 都 围绕 着 某 个 核心 概念 、 汶 在 问题 或 技术 技巧 展 
开 论述 。 你 要 理解 这 些 概念 、 问 题 和 技巧 并 灵活 运用 ， 而 不 要 拘 记 于 特定 的 任务 。 最 终 ， 学 完 本 
书 ， 你 将 成 为 一 名 更 出 色 的 JavaScript 程序 员 。 


本 书 与 JavaScript 库 


坦率 地 说 ， 如 果 你 正在 进行 重要 的 JavaScript 开发 ， 却 没有 使 用 已 有 的 优秀 框架 ， 那 你 就 已 
经 做 错 了 。 在 浏览 器 端 编写 高 效 的 网 页 脚本 是 一 项 挑战 。 你 会 碰 到 各 种 各 样 的 障碍 : DOM 中 的 
不 一 致 、 错 误 的 语言 实现 、CSS quirk 和 诡异 的 Ajax bug 等 。 在 服务 器 端 ， 即 使 已 经 有 了 运行 时 
的 支持 ， 你 仍 需要 把 数据 存储 、 网 络 栈 和 模块 系统 等 基本 服务 器 模块 组 合 在 一 起 ， 这 涉及 大 量 的 
工作 。 


幸运 的 是 , 优秀 的 开发 者 已 经 为 你 解决 了 这 些 难 题 。 现在 有 大 量 的 优秀 框架 (尤其 在 客户 端 ) 
供 你 选择 。 附 录 C 详细 介绍 了 主流 的 JavaScript 框架 。 


任何 称职 且 注 重 实效 的 JavaScript 开 发 者 都 会 依赖 一 个 或 多 个 优秀 框架 ， 因 此 ， 对 于 那些 在 
我 看 来 相当 “基本 ”的 任务 ， 本 书 会 介绍 它们 在 所 有 主流 客户 端 框架 中 的 实现 方法 。 我 选择 的 框 
架 包括 Prototype, jQuery, MooTools, YUI, Dojo 和 ExtJS,， 它们 覆盖 了 开发 者 心仪 的 大 部 分 框架 。 


对 于 不 那么 “基本 ”的 任务 ， 我 主要 用 我 的 最 爱 Prototype 来 处 理 〈 光 箱 特 效 除外 ， 因 为 我 
认为 在 这 个 任务 中 jQuery 插件 更 合适 )。 不 过 说 实话 ， 当 你 掌握 了 基本 技巧 之 后 ， 就 可 以 用 你 常 
用 的 库 来 改写 或 重 写 我 的 解决 方案 。 事实 上 ， 为 了 处 理 这 种 情况 ， 我 们 在 GitHub 上 建立 了 一 个 
公用 代码 库 ” 。 因 此 ， 如 果 你 需要 用 其 他 库 (比如 jQuery)， 只 需要 简单 地 点 一 下 GitHub 的 分 支 
(Fork) 按钮 ， 而 且 查 找 这 些 代 码 库 的 派生 版 本 也 很 容易 。 






































O 此 书 中 文 版 《JavaScript 权威 指南 》 已 由 机 械 工 业 出 版 社 出 版 。* 
© 本 书 作者 是 Prototype 的 铁杆 粉丝 。* 
@ 参见 http://github.com/tdd/pragmatic-javascript。 








此 外 ， 本 书 所 有 代码 都 被 打包 并 存档 在 本 书 网 站 上 ”。 如 果 想 测试 这 些 代码 的 效果 ， 请 访问 


http://demo.pocketjavascript.com, 


本 书 内 容 简介 


本 书 按 主题 划分 成 不 同 的 部 分 ， 每 个 部 分 均 包 含 了 一 系列 任务 。 书 的 末尾 有 一 些 附录 ， 你 在 
阅读 正文 之 前 很 可 能 需要 查阅 其 中 一 些 内 容 , 尤其 是 附录 A (JavaScript 快 速 参考 ) 和 附录 B ( 介 
绍 JavaScript 调试 技术 ) 。 








O 第 一 部 分 包含 了 JavaScript 开发 者 经 党 忽视 但 又 非常 重要 的 JavaScript 编码 模式 。 这 些 编 
码 模式 和 框架 关系 不 大 ， 但 为 了 编写 良好 的 JavaScript 代码 ， 它 们 不 可 或 缺 。 务 必 从 这 一 
部 分 开始 阅读 。 
O 第 二 部 分 主要 讲述 前 面 提 到 的 “基本 ”任务 ， 主 要 包括 基本 的 DOM 和 CSS 操纵 , 以 及 事 
件 处 理 和 定时 器 的 使 用 。 由 于 它们 都 很 “基本 ”， 所 以 我 列 出 了 所 有 主流 框架 下 这 些 任 务 
的 实现 代码 ， 你 可 以 根据 需要 来 选择 。 最 好 结合 附录 C 阅读 这 一 部 分 ， 从 而 对 这 些 主流 
框架 有 一 个 全 面 的 认识 ， 作 出 可 靠 的 决策 。 
O 第 三 部 分 主要 讲 用 户 界面 ,尤其 是 视觉 效果 和 简洁 的 Ul 理念 : 漂亮 的 tooltip、 光 箱 特效 、 
RRRA, ERR S. 
O 第 四 部 分 是 对 第 三 部 分 的 补充 ， 主 要 讲 绝 大 多 数 Web 应 用 的 重要 组 成 部 分 
外 ， 这 部 分 会 提 到 一 系列 用 来 辅助 、 简 化 和 验证 输入 的 工具 。 
O 第 五 部 分 主要 讲 客户 端 和 服务 端 之 间 的 关系 , 涉及 的 话题 包括 cookie, ISON 以 及 Ajax ( 域 
内 和 域 间 )。 
O 第 六 部 分 是 本 书 的 最 后 一 部 分 。 这 部 分 内 容 主要 讲解 如 何 利 用 混搭 (mashup) 思想 和 使 
用 第 三 方 服务 。 在 这 里 ， 我 选择 了 3 个 流行 主题 Twitter 应 用 、Flickr 应 用 以 及 地 理 位 置 
相关 的 API。 
O 附录 A 是 我 编写 的 一 份 JavaScript 快速 参考 。 其 中 总 结 了 一 些 我 认为 很 重要 的 JavaScript 
语言 元 素 ， 并 收录 了 一 些 实用 的 小 贴 士 。 希 望 它 能 对 你 有 用 。 
O 附录 B 主要 讨论 如 何 调试 JavaScript。 阅 读 这 部 分 的 所 有 内 容 是 很 有 必要 的 ， 但 愿 它 可 以 
省 去 你 在 电脑 前 抓 耳 搁 腮 的 大 量 时 间 ， 尤 其 是 你 使 用 Internet Explorer 的 时 候 。 
O 附录 C 简要 地 介绍 了 本 书 收录 的 主流 JavaScript 框架 。 我 已 尽 我 所 能 地 为 这 些 框架 逐一 给 
出 了 精确 的 描述 ， 并 且 展 示 出 它们 的 特点 ， 同 时 我 还 为 如 何 选择 JavaScript 框架 提供 了 一 
些 建议 。 














表单 。 此 




















© http://pragprog.com/titles/pg js, 
O 随 着 用 户 向 下 滚动 页 面 ， 分 批 加 载 并 显示 更 多 内 容 。 一 一 编者 注 
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O 附录 D 提供 了 一 份 快 速 参 考 , 列 出 了 有 关 JavaScript 及 其 主流 框架 的 帮助 资源 。 这 部 分 总 
结 了 附录 C 中 的 相关 内 容 ， 并 加 入 了 一 些 额 外 资源 〈 多 数 和 JavaScript 语言 有 关 )。 我 把 
这 部 分 放 在 本 书 的 最 后 ， 以 便 查 阅 。 


如 何 阅 读本 书 


在 本 书 中 ,每 一 个 任务 都 编排 成 对 开 的 两 页 : 一 页 是 文字 解说 ， 另 一 页 则 是 代码 。 如 有 果 你 阅 
读 的 是 纸 质 版 , 这样 的 排版 方式 会 让 你 感到 流畅 自然 ， 如果 你 阅读 的 是 电子 版 ,请 把 阅读 器 设置 
成 双 页 模式 ， 以 获得 最 佳 的 阅读 效果 。 





3 H 


写 书 从 来 不 是 一 件 容 易 的 事情 。 尽 管 技 术 书 不 需要 复杂 的 情节 , 也 不 需要 绞 尽 脑汁 地 来 充实 
每 页 内 容 , 但 是 迫 于 同行 的 压力 和 职业 的 责任 , 技术 书 的 作者 需要 尽 可 能 保证 内 容 的 准确 和 实用 ， 
从 而 为 读者 提供 最 佳 的 实践 。 因 此 ， 编 写 技术 书 必 须 付 出 巨大 的 努力 ， 而 技术 书 作者 也 会 竭尽 所 
能 来 保证 书 的 质量 。 

在 编写 本 书 的 过 程 中 ， 我 首先 要 感谢 本 书 中 提 及 并 用 到 的 框架 的 创造 者 们 : 一 方面 ， 他 们 的 
作品 使 得 Web 前 端 工 作 变 得 更 加 轻松 ; 另 一 方面 ， 他 们 对 本 书 的 严格 审阅 保证 了 本 书 的 质量 。 在 
这 里 ， 我 特别 感谢 Sam Stephenson, Thomas Fuchs, John Resig, Alex Russell, Jack Slocum 等 核心 
框架 开发 者 。 此 外 ， 我 还 要 感谢 Prototype Core 团队 的 成 员 。 他 们 不 仅 乐 于 助人 ,更 是 非常 杰出 的 
开发 者 ,我 从 他 们 身上 学 到 了 很 多 ,这 里 尤其 要 感谢 Andrew Dupont, Tobie Langel 和 Juriy Zaytsev, 


为 了 提高 本 书 的 技术 准确 性 和 整体 质量 , 很 多 人 (一 部 分 刚才 已 经 提 到 了 ) 仔细 审阅 过 本 书 。 
感谢 他 们 的 杰出 工作 ， 使 本 书 的 质量 得 到 保证 ! 我 特别 要 感谢 的 是 Dion Almaer、Arnaud 


Berthomier, Aaron Gustafson, Christian Heilmann, Dylan Schiemann 和 Sam Stephenson 。 




















这 是 我 与 Pragmatic Programmers 合作 出 版 的 第 二 本 书 "。 同 以 往 一 样 ，Dave Thomas 和 Andy 
Hunt 给 了 我 这 个 宝贵 的 机 会 ， 使 得 我 可 以 与 Pragmatic Guides 系列 的 优秀 工作 人 员 一 起 工作 ， 他 
们 是 : Pragmatic Guides 系列 编辑 Susannah Davidson Pfalzer、 本 书 编 辑 David McClintock (这 是 
他 在 Pragmatic Programmers 中 的 首次 亮相 )、 眼 光 锐 利 的 文字 编辑 Kim Wimpsett、 神 奇 的 Sara Lynn 
Eastler (她 魔术 般 地 完成 了 本 书 的 索引 ) 以 及 技术 精湛 的 Steve Peter (他 精心 排版 了 本 书 )。 

最 后 ， 感 谢 我 亲爱 的 妻子 Blodie。 感 谢 她 容忍 我 在 过 去 五 年 中 编写 了 四 本 书 ， 并 一 直 给 予 我 
支持 和 鼓励 。 她 的 爱 让 我 感到 自己 是 这 个 世界 上 最 幸运 的 人 , 我 无 法 想象 没有 她 的 生活 将 会 是 什 
么 样子 。 所 以 ， 同 以 前 一 样 ， 这 本 书 为 她 而 写 。 

















® 本 书 作者 的 第 一 本 Pragmatic Programmers 书 的 书 名 为 Prototype and script.aculo.us: You Never Knew JavaScript Could 
Do This!， 该 书 的 中 文 译本 《Prototype 与 script.aculo.us 终极 揭秘 》 已 由 电子 工业 出 版 社 出 版 。 译 者 注 
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序幕 正式 拉 开 。 这 部 分 介绍 了 JavaScript 语言 的 必 备 操作 ， 以 便 你 在 接 下 来 的 任务 中 大 展 产 
脚 。 由 于 这 部 分 中 使 用 的 都 是 纯粹 的 JavaScript 语言 ， 所 以 此 处 3 个 任务 的 代码 不 会 依赖 于 任何 

















口 
aay 





过 任务 1 会 学 到 如 何 动态 访问 对 象 的 属性 和 方法 (在 代码 里 决定 它们 的 名 称 )。 

在 任务 2 中 ， 学 习 如 何 将 代码 控制 在 一 个 私有 的 作用 域 ， 从 而 避免 “污染 ”别人 的 代码 ， 
同时 也 使 得 自己 的 代码 具有 自 包 含 性 。 

最 后 ， 在 任务 3 中 ， 学 习 如 何 创 建 具有 多 样 参 数 的 函数 。 





D 


D 





别 忘 了 ， 你 可 以 在 本 书 的 网 站 上 得 到 书 中 所 有 的 源 代码 。 你 也 可 以 直接 在 本 书 站 点 的 演示 
页 "中 直接 访问 它们 。 此 外 ， 请 准备 好 一 个 简单 的 空 页 面 (在 接 下 来 的 章节 中 可 能 需要 加 载 一 些 
库 或 框架 )， 打 开 JavaScript 控制 台 ， 以 便 测 试 书 中 的 代码 。 








© 参见 http://demos.pocketjavascript.com, 


2 B 第 一 部 分 JavaScript 必 备 操作 


任务 1 动态 选择 方法 及 属性 


在 实际 工作 中 ， 我 们 经 常会 遇 到 这 种 情况 ， 根据 某 个 条 件 来 调用 两 个 方法 "中 的 一 个 ， 或 是 
在 两 个 属性 ”中 的 一 个 上 面 进行 读 写 操作 。 下 面 的 代码 展示 了 这 种 情形 ; 
if (condition) { 
myObj .method1(someArg) ; 
} else { 


myObj .method2 (someArg) ; 
} 


JavaScript 提 供 了 一 种 简单 的 语法 ， 即 使 用 方 括 号 操作 符 ([]) 来 动态 地 选择 方法 和 属性 。 
正如 下 面 的 代码 所 示 ，JavaScript 有 两 种 等 价 的 成 员 访问 语法 (这 个 特征 在 动态 语言 里 很 常见 ): 


obj [expressionResultingInMembername] == obj .memberName 


如 果 你 曾 用 整数 下 标 来 访问 数组 中 的 某 个 元 素 , 那 你 已 经 开始 用 方 括号 操作 符 来 进行 动态 成 
员 选 择 了 。 这 是 因为 ， 数 组 对 象 本 身 就 包含 以 数字 下 标 命 名 的 属性 (以 及 length 属 性 )。 不 过 ， 
JavaScript 并 不 允许 你 使 用 点 操作 符 (.) 直接 访问 这 些 属性 ， 因 此 myArray .0 在 语法 上 是 非法 的 
(大 遗憾 了 ， 这 本 来 是 个 挺 酷 的 语法 )。 


为 什么 方 括号 操作 符 比 点 操作 符 表 示 法 更 强大 呢 ? 这 是 因为 你 可 以 在 方 括号 中 使 用 任何 代 
表 成 员 名 称 的 内 容 来 访问 对 象 的 成 员 。 这 些 内 容 包 括 字 面 量 、 保 存 着 成 员 名 称 的 变量 、 名 称 组 合 
(多 数 情 况 下 是 字符 串 的 拼接 ) 以 及 用 三 元 操作 符 (condaition ? valueIfTrue : valueIfFalse) 
实现 的 快速 ifE/then 选 择 。 所 有 的 这 些 内 容 都 会 被 处 理 成 一 个 字符 串 ， 然 后 JavaScript 会 用 这 个 字 
符 串 来 寻找 对 应 的 成 员 。 


由 于 JavaScript 中 的 函数 本 身 也 是 对 象 , 所 以 它 可 以 像 其 他 值 一 样 被 引用 。 如 果 一 个 表达 式 的 
结果 是 函数 ， 你 可 以 直接 用 括号 操作 符 调用 它 ， 就 像 你 直接 用 函数 名 称 调用 函数 一 样 。 

需要 注意 的 是 , 如 果 你 在 向 方法 传递 的 参数 上 大 量 使 用 此 类 技巧 , 混乱 的 括号 有 可 能 会 使 代 
码 变 得 难以 阅读 ， 此 时 使 用 常规 的 if/else 结 构 更 加 明智 。 




















O 方法 是 与 对 象 相关 联 的 函数 。 
D 属性 是 与 对 象 相关 联 的 变量 。 





任务 1 动态 选择 方法 及 属性 A 3 


使 用 方 括号 操作 符 


object ['propertyName' ] // => object.propertyName 
object ['methodName'](argl) // => object.methodName (arg1) 


切换 行为 


// 根据 shouldBeVisible 的 值 来 调用 show () 或 是 hiae () 
element [shouldBeVisible ? 'show' : 'hide'](); 


// 避免 卫 中 动画 带 来 的 巨大 开销 


// (假设 这 里 已 经 有 一 个 1sIE 变 量 ) 
element [isIE ? 'simpleEffect' : 'complexEffect'](); 


拼接 方法 名 称 
element[(enable ? 'add' : 'remove') + 'ClassName'] ('enabled'); 
请 动手 党 试 下 面 代码 


var love = { firstName: 'Élodie', lastName: 'Porteneuve' }; 
var useFirstName = true; 
alert (love[useFirstName ? 'firstName' : '‘lastName']); // => "Elodie" 


4 区 第 一 部 分 JavaScript 必 备 操作 


任务 2 通过 模块 模式 实现 代码 访问 控制 


随 着 你 的 JavaScript 代 码 库 的 扩大 ,本 应 被 控制 在 私有 作用 域 中 的 函数 和 变量 将 会 被 暴露 得 越 
来 越 多 ,这 时 你 的 全 局 作用 域 被 “污染 ”的 可 能 性 就 会 越 来 越 大 。 这 不 仅 会 导致 命名 冲突 (此 处 
的 脚本 在 无 意 中 和 覆盖 了 其 他 脚本 中 的 标识 符 )， 也 会 为 bug 提 供 了 温床 。 


因此 ,我 们 需要 编写 自 包含 的 、 不 透明 的 JavaScript 代 码 ， 它 不 会 向 外 界 暴 露 内 部 的 细节 , 也 
不 会 与 现 有 的 框架 和 库 出 现 冲 突 。 事 实 上 ， 这 正 是 “大 规模 编程 ”的 主要 要 求 。 模 块 模式 正 是 由 
此 应 运 而 生 的 。 


模块 模式 的 主要 思想 ， 是 为 那些 通过 var 关 键 字 声明 的 标识 符 和 函数 创建 一 个 私有 作用 域 ， 只 
有 定义 在 这 个 作用 域 里 的 函数 才能 直接 访问 这 些 数 据 。 为 了 使 外 界 能 够 访问 到 函数 里 的 部 分 内 容 ， 
我 们 有 两 个 选择 。 其 一 是 返回 一 个 包含 选 定 值 的 对 象 ( 具 体 的 做 法 见 右 页 中 的 代码 )， 然 后 把 这 个 
对 象 赋 给 外 界 的 变量 ; 另 一 种 则 是 给 函数 传 入 一 个 外 部 作用 域 可 访问 的 对 象 作为 参数 , 使 该 函数 能 
在 这 个 对 象 中 写 入 自己 的 属性 (如 果 想 让 它 的 属性 成 为 全 局 属性 ， 只 需 传人 window 对 象 )。 


JavaScript 中 ， 使 用 var 关 键 字 声明 的 标识 符 是 局 部 的 (它们 只 属于 当前 定义 的 作用 域 )。 而 
未 使 用 var 关 键 字 声明 的 标识 符 是 全 局 的 (它们 会 被 嫁接 到 当前 的 默认 作用 域 ， 而 默认 作用 域 在 
多 数 情况 下 就 是 全 局 的 window 对 象 )。 


在 一 些 特殊 情况 下 ， 当 前 的 默认 域 可 能 不 是 全 局 的 ， 在 这 样 的 上 下 文中 ， 即 使 使 用 非 var 声 
明 的 标识 符 ， 也 不 会 对 全 局 命名 空间 造成 影响 。 不 过 ， 这 已 经 超出 了 本 任务 所 讨论 的 范围 。 


技术 上 来 说 ， 你 并 不 需要 像 命名 私有 标识 符 那 样 显示 命名 “公有 属性 ”。 事 实 上 ， 你 完全 可 
以 在 返回 的 对 象 中 用 匿名 函数 的 方式 定义 公有 方法 。 但 这 样 做 的 话 会 使 得 代码 星 涩 难 懂 (或 是 
带 有 误导 性 )， 更 重要 的 是 ， 这 会 使 调试 难以 进行 。 因 此 ， 尽 可 能 用 命名 耳 数 表达 式 来 定义 你 的 
PRB : 
































function myFunctionName(...) { ... } 


这 会 令 代码 更 加 清晰 ， 同 时 也 便于 在 调试 时 观察 栈 轨迹 。 


tE 


(function 
var privateField = 


名 函数 中 使 用 var 关 键 字 


Ch 
42; 


function innerFunc() { 


notSoPrivate = 43; 
return notSoPrivate; 


alert (privateField); // => 42 
innerFunc(); 
alert (notSoPrivate); // => 43 


1) 0) 


alert (typeof privateField); 
alert (notSoPrivate) ; 


init 


i 


// => 43 


这 个 例子 :“ 私 有 属性 ” 


var obj = (function() { 
var privateField = 42; 
var publicField = 'foobar'; 
function processInternals() { 
function run() { 
processInternals(); 


alert (‘Still private stuff: ’ 
alert (Public stuff: 


return { 


j.run() 
j}.publicField // foobar 
j .processInternals() 
j}.privateField // Undefined 


publicField: publicField, 


run run 


// 弹出 三 个 对 话 框 : Internal, 


// Undefined 


任务 2 


// => Undefined 
(变量 被 泄露 到 外 部 ) 


alert('Internal stuff: ' 


still private, 


通过 模块 模式 实现 代码 访问 控制 三 


+ privateField) ;} 


+ privateField); 
’ + publicField); 


public 
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6 > 第 一 部 分 JavaScript 必 备 操作 


任务 3 使 用 可 选 /可 变 /命名 参数 


为 了 熟练 掌握 JavaScript 中 参数 的 使 用 技巧 ， 你 首先 需要 意识 到 : 在 JavaScript 中 ， 你 所 显 式 
声明 的 形 参 并 不 会 对 实 参 造成 限制 。 因 为 每 个 函数 都 会 把 它 的 实 参 保存 在 一 个 预定 义 的 
arguments 变 量 中 (arguments 具 有 length 属 性 和 [] 操 作 符 ”)。 因 此 ， 形 参 实际 上 只 是 为 实 参 提 
供 了 本 地 名 称 。 如 果 形 参与 实 参 的 数量 一 致 ， 那 这 些 形 参 将 会 引用 实 参 的 内 容 。 如 果 不 是 的 话 ， 
空缺 的 形 参 会 被 赋予 undqefined。 


现在 ,请 注意 下 一 页 中 可 选 参 数 的 例子 。 我 用 undefined === rant 测 试 第 二 个 实 参 是 否 
存在 。 为 什么 要 连用 三 个 等 号 呢 ? 这 就 得 说 说 JavaScript 混 乱 的 等 价 规则 了 。 请 看 下 面 的 表达 式 : 




















undefined === null // => false 
undefined == null // => true 


看 明白 了 吧 。 因 此 ， 假 设 我 们 认为 aul1 是 zant 的 一 个 合法 值 ， 我 们 就 需要 同时 检查 rant 
的 值 和 类 型 ， 这 正 是 一 = 比较 操作 符 所 做 的 ， 它 是 严格 比较 操作 符 (strict equality operator) 。 


在 多 数 情况 下 ， 你 需要 为 参数 的 “ 空 值 ”给 出 更 明确 的 定义 。 比 如 ， 假 设 我 们 需要 rant 
是 一 段 有 意义 的 文字 : 空 字符 串 、nulL1、undefineda、0 和 false 显 然 都 是 没有 意义 的 。 正 
巧 这 些 值 在 JavaScript 中 都 与 false 等 价 ， 因 此 ， 我 们 可 以 用 相当 简洁 的 方式 来 设置 rant 的 
默认 值 : 


rant = rant || 'IE6 must die!'; 


鉴于 JavaScript 的 false 等 价 关 系 是 如 此 混乱 ， 因 此 我 在 右 页 的 第 四 个 例子 中 用 了 in 操作 符 来 
判断 options 对 象 是 否 包 含 一 个 给 定 的 属性 , 而 不 是 用 :options [opt] 。 因 为 这 段 代 码 相当 通用 ， 
很 多 地 方 都 会 用 到 它 ， 所 以 我 采取 了 一 种 相对 保守 的 编码 风格 : 在 使 用 某 个 属性 之 前 ， 先 判断 这 
个 属性 是 否 存在 。 

这 个 例子 同时 也 展示 了 如 何 用 for. . .in 语法 遍历 一 个 对 象 的 属性 (property ) 。 

最 后 ， 请 注意 ， 我 是 通过 该 函数 的 公有 属性 来 设置 repeat () 的 默认 参数 的 ， 这 样 ， 用 户 就 
可 以 在 不 触动 全 局 对 象 的 情况 下 随时 修改 该 函数 的 默认 参数 。 为 了 获得 函数 自身 的 引用 , 我 们 会 
使 用 arguments 的 特殊 属性 callee2 。 




















O 尽管 很 像 数 组 ， 但 实际 上 它 并 非 数 组 。* 
@ arguments 的 callee 属 性 会 返回 正 被 执行 的 Function 对 象 。* 
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声明 参数 〈 命 名 参数 ) 


function repeat(rant, times) { 
while (--times >= 0) 
alert (rant); 
} 
repeat ('IE6 must die!', 5); // => 连续 弹出 5 个 对 话 框 


动态 获得 不 定数 量 的 参数 
内 置 的 arguments 变 量 允 许 你 动态 访问 函数 的 参数 。 
这 使 你 可 以 模拟 其 他 语言 中 的 变 长 参数 列表 ， 比 如 C 语 言 的 varargs。 


function repeat (times) { 
while (--times >= 0) { 
for (var index = 1, len = arguments.length; index < len; ++index) { 
alert (arguments [index] ); 


} 


} 
repeat(2, 'IE6 must die!', 'So should IE7...'); // => 连续 弹出 4 个 对 话 框 


为 可 选 参数 设置 默认 值 


function repeat (times, rant) { 
if (undefined === rant) { 
rant = IRES must dielt; 
} 
while(--times >= 0) { 
alert (rant); 
} 
} 
repeat (3); // => 连续 弹出 3 个 有 关 IE6 的 对 话 框 
repeat (3，'So should IE7...'); // => 连续 弹出 3 个 有 关 IE7 的 对 话 框 


用 字面 量 对 象 实现 伪 命 名 参数 


function repeat (options) { 


options = options || {}; 
for (var opt in (repeat.defaultOptions || {})) { 
if (!(opt in options)) { 
options[opt] = repeat.defaultOptions[opt]; 


} 
} 
for (var index = 0; index < options.times; ++index) { 
alert (options.rant); 
} 
} 


repeat.defaultOptions = { times: 2, rant : 'IE6 must die!' }; 


repeat (); // 弹出 两 个 与 IE6 有 关 的 对 话 框 
repeat({ times: 3 }); // 弹出 3 个 与 IE6 有 关 的 对 话 杠 
repeat({ times: 2, rant: 'Flash must die!' }); // 弹出 两 个 与 Flash 有 关 的 对 话 框 


DOM、 事 件 及 定时 器 





通过 对 第 一 部 分 的 学 习 ， 我 们 对 JavaScript 已 有 了 一 定 的 认识 ， 接 下 来 ， 让 我 们 开始 探索 
JavaScript 和 Web 页 面 之 间 的 纽带 : DOM 操纵 。 


DOM 操纵 一 般 分 为 以 下 儿 类 。 

OQ 获得 DOM 元 素 的 引用 ， 以 便 进行 操作 。 这 部 分 内 容 将 在 任务 4 中 阐述 。 

O 改变 DOM 元 素 的 外 观 ， 可 以 是 直接 修改 ， 也 可 以 是 使 用 动画 (大 多 会 通过 显示 、 隐 茂 
或 移动 元 素来 修改 样式 )。 任 务 5 将 会 讲述 这 部 分 内 容 。 

O 修改 DOM 元 素 的 内 容 。 任 务 6 讲述 了 这 方面 的 内 容 。 

由 于 上 面 的 操作 都 是 在 页 面 初始 化 时 、 响 应 特定 的 事件 或 在 一 段 时 间 发 生 后 得 以 执行 ， 因 
此 我 们 还 需要 讨论 以 下 内 容 。 

任务 7 阐述 了 页 面 初始 化 的 概念 。 有 具体 地 说 ， 我 们 利用 这 些 概念 来 检测 DOM ge BA 
完成 ， 以 便 对 其 进行 操作 。 

O 任务 8 提供 了 事件 监听 的 基本 概念 ， 任 务 9 提供 了 高 效 监 听 事 件 的 方案 ， 而 任务 10 则 进 
一 步 阐述 了 如 何 发 挥 事 件 的 威力 。 

O 任务 11 展示 了 如 何 使 用 定时 器 (给 出 了 一 个 通过 定时 器 模拟 后 台 处 理 的 例子 )。 


由 于 上 面 的 操作 都 是 Web 应 用 中 所 不 可 或 缺 的 ， 所 以 我 在 这 里 提供 了 这 些 操作 在 所 有 主流 
JavaScript 框架 下 的 代码 。 同 样 的 操作 在 不 同 框架 下 的 实现 可 能 略 有 差异 ， 但 是 它们 在 功能 
是 等 价 的 。 对 比 剖 析 在 几 个 世纪 前 是 很 流行 的 学 习 方 法 , 现在 它 也 不 失 为 一 种 研究 问题 的 途径 ， 
能 够 使 你 获得 更 宽广 的 视野 。 


© 本 书 统一 将 element 译 为 元 素 ， 将 node 译 为 节点 。* 

© 也 就 是 本 书 作 者 所 选择 的 框架 ， 包 括 Prototype, jQuery, MooTools, YUI, Dojo 和 ExtJS, * 

© 原文 为 compared anatomy， 这 是 一 种 生物 学 的 研究 方法 ， 请 访问 http://en.wikipedia.org/wiki/ Comparative_anatomy 
以 获得 更 多 细 方 。* 
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任务 4 获得 DOM 元 素 的 引用 


获得 页 面 上 的 DOM 元 素 以 及 “遍历 ”DOM (从 一 个 元 素 移 至 另 一 个 元 素 ) 是 编写 Web 脚 本 
的 必需 操作 。 虽 然 现 在 的 浏览 器 已 经 可 以 提供 不 错 的 DOM 元 素 获 取 方 法 (尽管 人 们 用 了 足 足 十 
年 才 达 到 这 一 步 ) ， 不 过 在 不 使 用 库 的 情况 下 遍历 DOM 仍 然 非常 烦琐 。 因 此 在 实际 工作 中 ,我们 
都 需要 使 用 这 样 或 那样 的 库 。 


在 这 里 需要 注意 以 下 几 点 。 


首先 , 要 注意 document .getElementById, 任何 依赖 于 这 个 方法 的 代码 都 会 成 为 下 怪异 行 
为 的 牺牲 品 。 因 为 在 正中 ， 这 个 方法 也 会 通过 name 属 性 来 寻找 匹配 的 元 素 。 如 果 你 使 用 的 是 严 
格 的 DOCTYPE (你 应 该 这 么 做 )， 这 看 起 来 意味 着 只 需要 “注意 字段 的 命名 ”。 由 于 你 已 经 在 潜 意 
识 中 排除 了 <head> 和 <meta> 标 签 的 name 属 性 ， 所 以 当 你 不 知 不 觉 地 定义 了 一 个 ia 属 性 和 
<meta> 标 签 特 定 属性 相同 的 元 素 后 ， 如 果 你 用 document .getElementById 获 取 它 ， 你 将 会 惊 
讶 地 发 现 你 得 到 的 是 <meta> 元 素 ! 所 以 ， 尽 可 能 避免 使 用 这 些 特殊 值 作为 1a 属性 的 值 。 


在 右 页 ， 我 提 到 了 绝 大 多 数 选择 元 素 的 技术 ， 都 需要 先 指定 上 下 文 节 点 或 根 节点 ， 然 后 以 
这 个 布点 作为 根 元 素 ， 在 其 之 上 进行 选择 操作 。 上 默认 的 上 下 文 是 整个 文档 。 翻 阅 一 下 API 文 档 ， 
你 会 发 现 诸如 $$ () 、gquery OARS O 等 方法 都 有 一 个 可 选 参数 (一般 是 第 二 个 ) ,以便 你 来 指定 
上 下 文 元 素 。 要 记 住 ， 搜 索 范 围 越 罕 ， 选 择 的 速度 也 就 越 快 。 

最 后 ， 原 始 的 DOM API 并 不 适合 实际 的 元 素 访问 操作 ， 因 为 它们 适用 于 节点 ， 而 不 是 元 素 。 
原始 的 DOM API 会 让 你 陷入 到 空白 节点 、 注 释 节 点 、 文 本 节点 等 节点 的 泥潭 之 中 ,因此 ， 绝 大 多 
数 库 提 供 了 不 错 的 面向 元 素 的 辅助 方法 。Prototype、jQuery 和 MooTools 都 提供 了 丰富 的 API， 这 
包括 previous () (或 prev() )、next()、siblings()、ancestors () 等 方法 ,还 包括 那些 以 get 
为 前 缀 的 同类 方法 。 YUI3 API 中 提供 的 方法 略微 少 些 , 而 Dojo 和 ExtJS 则 和 暂时 缺乏 此 类 辅助 方法 。 


绝 大 多 数 的 库 都 支持 基于 ID 和 基于 CSS3 的 选择 。 
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通过 ID 属性 获得 对 应 的 元 素 


document .getElementById('elementId') // 原始 的 W3C DOM 
$('elementId') // Prototype, MooTools 
$('#elementId') // jQuery 
Y.one('#elementId') // YUB 
dojo.byId('elementId') // Dojo 
Ext.getDom('elementId') // Ext JS3 


通过 XPath/CSS 选 择 来 获得 元 素 


不 同 的 库 所 支持 的 语法 可 能 会 有 所 差异 ，W3C 选 择 器 API 只 在 最 新 的 浏览 器 中 可 用 (不 过 
其 速度 相当 快 ), 这 些 浏览 器 包括 : Firefox 3.1+、Safari 3.1+、IE8+ (标准 模式 )、Chrome 以 及 
Opera 10+。 


还 需要 注意 的 是 ,这 些 库 都 提供 了 一 些 途 径 来 指定 上 下 文 , 也 就 是 作为 搜索 起 点 的 根 市 点 ( 默 
认 是 整个 文档 ) 。 尽 可 能 缩小 上 下 文 的 范围 ， 以 争取 更 快 的 执行 速度 和 更 小 的 内 存 占 用 。 





document .querySelectorAll('selectors') // Native (如 上 ) 
$$('selectors') // Prototype, MooTools 
someRootElement.select ('selectors') // Prototype 
$('selectors') // jQuery 
Y.all('selectors') // YUI3 
dojo.query('selectors') // Dojo 
Ext.query('selectors') // Ext JS3 


元 素 间 移动 (遍历 DOM) 
下 面 的 例子 基于 Prototype， 如 果 需 要 这 个 例子 的 上 下 文 和 额外 的 信息 ， 请 阅读 左 页 。 


// 从 具有 指定 id 属 性 的 元 素 开 始 ， 到 达 最 近 的 class 属 性 为 category 的 <h2> 元 素 
// 然后 遍历 这 个 元 素 的 兄弟 元 素 直 到 遇 到 一 个 class 属 性 为 Summary 的 元 素 
S('someDeeplyNestedElement') .up('h2.category').next('.summary'); 


// 找到 带 有 名 为 sifr 的 CSS class 的 元 素 
// 设置 这 些 元 素 的 直接 容器 的 CSS 文 本 缩 进 属性 
$$('a.sifr').invoke('up').invoke('setStyle', 'text-indent: -9999px'); 
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任务 5 动态 修饰 内 容 


获得 某 个 DOM 元 素 的 CSS 属 性 的 当前 值 (无 论 是 指定 的 还 是 计算 得 出 的 )， 并 修改 这 些 值 以 
改变 页 面 的 外 观 ， 是 创建 Web UI 所 不 可 或 缺 的 操作 。 不 过 ， 浏 览 器 和 W3C 的 标准 在 这 方面 上 还 
是 一 片 空白 ， 因 此 这 个 重任 就 落 到 了 库 和 框架 的 肩 上 。 在 右 页 你 会 发 现 ,现在 的 库 均 为 这 些 操 作 
提供 了 丰富 的 API， 而 且 它 们 彼此 十 分 相似 。 


如 何 进 行动 态 修饰 呢 ? 答案 就 是 使 用 cJass 属 性 。 


为 了 开发 属于 你 自己 的 视觉 效果 , 你 当然 可 以 自己 动手 修改 样式 , 但 这 个 工作 最 好 还 是 留 给 
那些 库 的 作者 和 JavaScript 大 师 。 我 相信 , 作为 一 个 前 端 开发 者 , 你 能 够 把 特定 的 样式 和 JavaScript 
代码 清楚 地 分 离开 来 ， 然 后 通过 切换 CSS 的 class 名 称 和 使 用 你 所 编写 的 特效 ， 来 获得 你 想 要 的 
效果 。 

事实 上 , 所 有 的 库 都 提供 了 一 系列 统一 的 API 来 增加 、 删 除 和 检查 某 个 元 素 上 的 CSS 的 class 
名 是 否 存在 。MooTools 、jQuery、YUI、Dojio 和 Ext 都 可 以 通过 aqqclass() 、hasClass ()，、 
removeClass () 及 toggleclass () 来 完成 这 些 操作 。Prototype 则 只 是 在 这 些 方法 的 名 称 后 面 加 了 
一 个 Name 后 缀 (比如 hasClassName () )。 























不 要 忘 了 使 用 快捷 操作 1 

所 有 的 库 都 为 常用 的 操作 提供 了 一 系列 快捷 的 读 / 写 操作 ， 比 如 操作 可 见 性 〈 隐 藏 /显示 / 切 
换 )、 透 明度 (依照 CSS 标 准 ， 即 使 在 正 上 也 是 这 样 ) 及 维度 等 。 阅 读 文 档 时 ， 你 就 会 发 现 : 一 
般 而 言 ， 方 法 的 名 称 就 能 说 明 它 的 含义 。 
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设置 元 素 的 样式 


// Prototype 

S(element).setStyle('prop: value; prop2: value2;') 
S(element).setStyle({ prop: 'value', prop2: 'value2' }) 
// jQuery 

S(element).css('prop', 'value') 

S(element).css({ prop: ‘'value', prop2: 'value2' }) 

// MooTools 





S(element).setStyle('prop', 'value') 
S(element).setStyles({ prop: 'value', prop2: 'value2' }) 
// YUI3 

Y.one('#id').setStyle('prop', 'value') 
Y.one('#id').setStyles({ prop: 'value', prop2: 'value2' }) 
// Dojo 

dojo.style(element, '‘prop', 'value') 

dojo.style(element, { prop: 'value', prop2: 'value2' }) 

// ExtJS 

Ext .get (element).setStyle('prop', '‘'value') 


Ext .get (element).setStyle({ prop: ‘value’, prop2: 'value2' }) 
Ext.get (element) .applyStyles (function(e) { return someSpec; }) 


获取 元 素 的 样式 


// Prototype 

$ (element) .getStyle('prop') 

// jQuery 

$ (element) .css('prop') 

// MooTools 

$ (element) .getStyle( 'prop') 

// YUI3 
Y.one('#id').getComputedStyle('prop') 
Y.one('#id').getStyle('prop') 

// Dojo 

dojo.style(element, '‘prop') 
dojo.style(element) // => 获得 该 元 素 所 有 的 样式 
// ExtJS 

Ext .get (element) .getStyle('prop') 

Ext.get (element) .getStyles('prop', '‘prop2', 'prop3') 


相关 任务 


n 任务 6 
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任务 6 修改 元 素 的 内 容 
你 可 能 会 问 ， 为 什么 不 通过 设置 innerHT 属 性 来 修改 该 元 素 的 内 容 呢 ? 


直接 把 指定 的 超 文 本 赋 给 容器 元 素 的 jnnerHTML 属 性 ， 这 样 看 起 来 很 有 吸引 力 。 确 实 ， 这 样 
做 会 迅速 获得 几 个 数量 级 的 速度 提升 。 但 是 ,在 许多 浏览 器 中 ,一 些 不 规范 的 超 文本 可 能 会 导致 
innerHTML 属 性 失效 ， 而 库 则 会 在 需要 的 情况 下 使 用 其 他 机 制 ( 比 如 手动 DOM 构 建 或 超 文 本 预 
处 理 ) 来 保证 超 文本 能 顺利 插入 。 当 使 用 内 容 注 入 而 非 全 部 的 内 容 替 换 ， 或 者 是 包含 内 联 脚本 的 
超 文本 时 〈 接 下 来 的 段落 中 将 会 讨论 这 一 内 容 )， 使 用 库 更 加 方便 、 简 洁 ， 并 且 不 容易 出 错 〈 相 
对 与 手动 操作 超 文本 而 言 )。 


注意 ， 不 要 混淆 替换 (updating) 和 更 新 (replacing) 这 两 个 操作 。 大 多 数 方法 默认 执行 的 
是 更 新 操作 一 一 举例 来 说 , dojo.place() 方 法 中 的 only 位 置 。 更 新 操作 会 改变 元 素 内 部 的 内 容 ， 
而 替换 操作 则 会 改变 元 素 自 身 ， 因 此 可 能 会 导致 元 素 的 ITp 和 与 之 关联 的 事件 监听 器 失效 。 替 换 
操作 实际 上 和 设置 outerHTML 属 性 相等 价 。 


幸运 的 是 ， 一 些 库 提 供 了 一 系列 特殊 方法 来 辅助 基本 的 更 新 /插入 操作 ， 比 如 元 素 包装 、 基 
于 选择 器 的 多 元 素 操作 以 及 清除 多 余 的 空 文本 市 点 等 。 因此 , 请 务必 阅读 你 常用 的 库 的 API 文 档 ， 
以 了 解 更 多 细 证 。 


不 过 ， 如 果 要 注入 <script> 标 签 ， 那 你 可 得 小 心 了 。 因 为 根据 默认 设置 ， 本 地 注入 的 超 文 
本 中 内 舱 的 <script> 标 签 中 的 脚本 并 不 会 运行 ， 有 时 这 可 能 会 导致 一 些 问 题 ， 所 以 如 果 可 能 外 
话 ， 尽 量 利用 事件 代理 "实现 等 同 的 功能 。 不 过 ， 由 于 这 个 需求 是 如 此 普遍 ， 一 些 库 已 经 提供 了 
相应 的 机 制 。 


























口 Prototype 的 update() 、replace() 和 insert () 方 法 默认 会 运行 内 联 的 <script> 标 签 中 的 
脚本 〈 为 了 Ajax 更 新 ， 需 将 esvalScripts 选 项 设 为 true ) 。 

O jQuery 的 html () 方 法 默认 也 会 执行 内 联 的 脚本 。 

O Ext 的 update() 方 法 ， 把 第 二 个 参数 设置 为 Lrue， 以 运行 内 联 的 脚本 。 


出 于 安全 方面 的 考虑 , 这 些 待 运行 的 脚本 有 时 可 能 会 在 一 个 特殊 的 执行 上 下 文中 运行 。 请 阅 
读 你 常用 的 库 的 文档 ， 以 获得 更 多 的 细 市 。 











D 阅读 任务 9 以 获得 更 多 细 闻 。 
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更 新 元 素 的 全 部 内 容 


// Prototype 

$s (element) .update('<p>new internal HTML</p>') 

$ (element) .replace('<p>This will replace the element itself</p>') 

// jQuery 

$(element) .html('<p>new internal HTML</p>') 

S(element).text('The <div> and <span> elements carry no inherent semantics. ') 
// MooTools 





S(element).set('html', '<p>new internal HTML</p>') 

S(element).set('text', 'The semantics of << and >> varies across languages. ') 
// YUI3 

Y.one('#id').setContent ('<p>new internal HTML</p>') 

// Dojo 


dojo.place('<p>new internal HTML</p>', element, ‘only') 

dojo.place('<p>This will replace the element itself</p>', element, ‘'replace') 
// ExtJS 

Ext.get (element) .update('<p>new internal HTML</p>') 


请 注意 , jQuery 和 MooTools 使 用 了 特殊 的 更 新 机 制 ， 来 对 传 入 文本 中 的 标签 进行 转 义 ， 这 使 
得 在 页 面 展示 代码 变 得 很 方便 。 


向 元 素 中 注入 其 他 内 容 


// Prototype。 位 置 包 括 : 'before', 'top', 'bottom', 'after' 
S(element).insert('<p>This gets at bottom</p>') 
S(element).insert({ pos: markup, pos2: markup2... }) 

// jQuery (提供 了 大 量 的 方法 来 控制 插入 的 位 置 ) 

$ (element) .before('<p>This gets before the element</p>') 
$ (element) .prepend('<p>This gets at top</p>') 

S(element) .append('<p>This gets at bottom</p>') 
S(element).after('<p>This gets after the element</p>') 
// YUI3 
Y.one('#id' 
Y.one('#id' 


). 
Jig 
Vine 
). 


prepend('<p>This gets at top</p>') 

append('<p>This gets at top</p>') 
Y.one('#id').insert('<p>This gets where told</p>', nextChildElement) 
Y.one('#id').insert('<p>This gets where told</p>', childIndex) 

// Dojo。 位 置 包括 : 'before', 'first', 'last', 'after' 
dojo.place('<p>This gets where told</p>', element, pos) 

// ExtJS。 位置 包 括 : 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd' 
Ext .get (element) .insertHtml (pos, '<p>This gets where told</p>') 


we 
|x 
Js 
). 


相关 任务 


QO 任务 5。 
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任务 7 在 DOM 加 载 完成 后 运行 脚本 


为 了 使 你 的 页 面 在 一 开始 就 能 给 出 正确 的 响应 ， 你 的 脚本 应 该 在 页 面 DOM 加 载 完 成 后 尽快 
得 到 执行 。 

如 果 你 使 用 window 的 1oaa 事 件 , 你 的 脚本 就 得 等 到 所 有 资源 (包括 样式 表 、 图 片 以 及 Google 
Analytics" 跟 踪 器 之 类 的 加 载 时 间 很 长 的 脚本 ) 加 载 完成 之 后 才能 被 执行 。 而 这 往往 会 使 页 面 得 
不 到 及 时 的 演 染 。 


所 有 的 JavaScript 库 都 在 这 方面 下 足 了 功夫 , 它们 的 处 理 方法 很 相似 : 以 自 定义 方法 或 是 自 定 
义 事件 〈 比 如 Prototype、MooTools 和 YUI3) 的 形式 提供 了 一 个 触发 器 ， 你 只 需 把 要 执行 的 脚本 
写 到 一 个 函数 里 ， 再 把 这 个 函数 指派 到 这 个 触发 器 上 就 可 以 了 。 

顺便 提 一 个 良好 实践 :， 如果 你 的 UI 部 分 依赖 于 JavaScript， 那 你 就 应 该 把 非 JavaScript 相 关 的 
UI 设置 为 默认 可 见 ， 而 把 JavaScript 相 关 的 UI 设置 为 隐藏 。 等 DOM 加 载 的 事件 发 生 之 后 ， 你 只 需 
把 JavaScript 相 关 的 部 分 添加 到 文档 中 ， 然 后 利用 CSS 切 换 其 可 见 性 。 由 于 这 样 可 以 避免 页 面 载 入 
中 的 UI 内 烁 ， 因 此 它 比 直 接 使 用 JavaScript 来 隐藏 无 关 UI 要 好 很 多 。 


现在 举 一 个 相当 有 技巧 的 例子 : 假设 你 的 初始 化 代码 位 于 某 处 的 实例 方法 中 , 为 确保 实例 方 
法 内 部 的 this 指 向 正确 的 实例 , 需要 保持 方法 与 原来 实例 的 绑 定 关系 。 多 数 库 提 供 了 常规 方法 绑 
定 的 方式 (比如 Prototype 中 的 bina() ) 来 实现 它 ， 而 Dojo 和 ExtJS 在 这 方面 走 得 更 远 ， 它 们 允许 
你 为 方法 的 实例 提供 一 个 显 式 的 引用 。 也 就 是 说 ， 它 们 可 以 直接 在 合适 的 上 下 文中 调用 方法 : 























// Dojo 

dojo.addOnLoad(binding, fx) 

// Ext JS 

Ext .onReady (fx, binding) 

你 也 应 该 去 检查 你 的 初始 化 代码 是 否 真 的 在 DOM 加 载 时 执行 ， 在 少数 情况 下 ， 一 些 代码 会 
过 早 执行 。 举 例 来 说 ， 你 可 能 需要 等 待 其 幅 图 像 载 和 完成， 以 便 根据 它们 的 尺寸 来 设置 UI; 与 此 
类 似 ， 你 可 能 需要 等 待 基 个 CSS 样 式 表 加 载 完毕 ， 以 便 设 置 元 素 的 尺寸 、 颜 色 等 属性 。 在 这 种 情 
况 下 ,你 有 可 能 要 使 用 windqow 的 load 事 件 。 不 过 , 在 大 多 数 情况 下 ,DOM 加 载 事件 已 经 够 用 了 。 











® Google Analytics 是 Google 为 网 站 提供 的 数据 统计 服务 。 可 以 对 目标 网 站 进行 访问 数据 统计 和 分 析 ， 并 提供 多 种 参 
数 供 网 站 拥有 者 使 用 。* 
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在 DOM 加 载 时 执行 指定 脚本 


// Prototype 

document .observe('dom:ready', fx) 
// jQuery 

$ (fx) 

// MooTools 

window.addEvent ('domready', fx) 
// YUI3 

Y.on('domready', fx) 

// Dojo 

dojo.addOnLoad (fx) 

// ExtJS 

Ext .onReady (fx) 


相关 任务 


n 任务 8 
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任务 8 监听 及 停止 监听 事件 


事件 是 一 个 庞大 的 主题 ， 短 短 两 页 的 篇 幅 连 基本 概念 都 无 法 覆盖 。 因 此 , 这 里 只 提供 一 个 非 
常 简短 的 快速 参考 (MATAN). PMAR 〈 我 儿 乎 敢 断 言 ， 你 必须 ) 花 时 间 ， 找 到 你 使 用 的 库 的 
文档 或 指南 ， 将 其 中 与 事件 相关 的 内 容 仔 细 了 阅读 几 遍 。 不 要 觉得 这 是 浪费 时 间 ， 掌 握 事件 的 技巧 
会 为 你 带 来 巨大 的 回报 。 


需要 特别 注意 的 是 ， 多 数 库 为 监听 特殊 事件 提供 了 简写 方法 ， 因 此 ， 你 应 该 调用 的 是 
onclick (handlerFx) 而 不 是 connect ('click', handlerFx) 。 另 一 个 有 用 的 技巧 是 ， 多 数 库 
人 允许 用 较 少 的 参数 来 停止 或 关闭 一 系列 事件 〈 例 如 ,关闭 所 有 的 单 击 事件 或 停止 监听 某 个 元 素 上 
的 所 有 事件 )。 


值得 注意 的 特例 :Dojo 使 用 一 种 单独 的 机 制 来 连接 任意 形式 的 事件 (如 常规 的 DOM 事 件 、 
自 定 义 事件 、 所 谓 的 全 局 事件 、 发 布 -订阅 事件 以 及 单纯 的 方法 调用 等 ) 和 任意 形式 的 函数 ( 包 
括 真实 的 事件 处 理 器 、 普 通 的 函数 和 方法 )。 这 是 个 非常 好 的 特性 。 而 Ext JS 可 以 通过 设置 on () 
的 第 四 个 参数 ， 来 配置 各 种 各 样 的 事件 。 


所 有 的 库 都 提供 了 一 种 简单 的 方式 ， 以 便 你 在 文档 级 别 来 监听 事件 (利用 事件 冒 泡 )。 举 例 
来 说 ， 你 可 以 使 用 Prototype 中 的 document .observe, 或 者 利用 dojo.doc 或 Ext .getDoc () 这 些 
包装 器 。 不 过 ， 你 不 应 该 过 度 依赖 事件 捕获 ( 自 上 而 下 的 事件 传播 /检查 ) 相关 的 参数 和 选项 ， 
因为 在 正 8 之 前 的 下 中， 它们 没有 得 到 很 好 的 支持 。 


所 有 的 库 均 为 事件 处 理 器 提供 了 一 个 加 强 版 的 Event 对 象 ,其 中 既 包 含 了 W3C 要 求 的 属性 和 
方法 ， 也 包含 了 一 些 辅助 性 的 属性 和 方法 。 

默认 情况 下 , 事件 处 理 函 数 在 作为 函数 引用 传递 时 会 丢失 它们 六 在 的 绑 定 关系 , 而 在 全 局 上 
下 文中 执行 "。 为 了 解决 这 个 问题 ， 一 些 库 允许 你 传递 一 个 可 选 的 参数 作为 作用 域 对 象 。 

最 后 ， 绝 大 多 数 库 支持 自 定义 事件 和 一 些 惯用 事件 。 就 我 个 人 而 言 ， DOM 提 供 的 一 些 备 用 
事件 不 可 或 缺 ， 比 如 mouseenter 和 mouseleave 等 事件 。 




























































































© 作者 的 这 篇 文章 包含 了 很 多 JavaScript 绑 定 的 要 点 和 技巧 ， 网 址 在 http://www.alistapart.com/articles/getoutbinding- 
situations/。 





任务 8 ”监听 及 停止 监听 事件 号 19 


在 某 个 元 素 上 监听 某 个 事件 


// Prototype 

$s (element) .observe('event', handlerFx) 
// jQuery 
$(elementOrSelector) .bind('event', handlerFx) 
// MooTools 

$ (element) .addEvent ('event', handlerFx) 

// YUI3 
Y.on('event', handlerFx, elementOrSelector) 

// Dojo (handlerFxBTUAEFRAKH HK, MTUAREFLWAYNFE) 
dojo.connect (element, ‘event', handlerFx) 

// Ext 

Ext .get (element) .on('event', handlerFx) 





在 多 个 元 素 上 监听 某 个 事件 


// Prototype 


elements.invoke('observe', ‘event', handlerFx) 
// jQuery 

$s (elements) .bind('event', handlerFx) 

// YUI3 

Y.on('event', handlerFx, elementOrSelector) 

// Dojo 


dojo.query (selector) .connect('event', handlerFx) 
// Ext, for on-DOM-readiness bindings: 
Ext.addBehaviors({ 'selector@event': handlerFx... }) 


停止 监听 


// Prototype 

S (element) .stopObserving('event', handlerFx) 

// jQuery 

$(elementOrSelector) .unbind('event', handlerFx) 
// MooTools 

S (element) .removeEvent ('event', handlerFx) 

// YUI3 

Y.detach('event', handlerFx, elementOrSelector) 
// Dojo 

dojo.disconnect (handleReturnedByConnect) 

// Ext (注意 ， 这 里 是 "Un" 而 不 是 "oNn"……: ) 

Ext .get (element) .un('event', handlerFx) 


相关 任务 


OQ 任务 7 
O 任务 9 
a 任务 10 
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任务 9 利用 事件 委托 


请 用 心理 解 并 牢记 这 句 话 : 优先 使 用 事件 委托 。 


你 应 该 知道 ， 绝 大 多 数 的 事件 可 以 冒 泡 ， 比 如 说 鼠标 或 键盘 事件 。 当 这 些 事件 在 DOM 某 处 
发 生 时 ， 它 们 会 沿 着 祖先 元 素 这 条 线 ， 从 内 向 外 依次 触发 各 个 元 素 ， 直 到 文档 的 根 元 素 (如 果 这 
些 元 素 中 的 任何 一 个 都 没有 监听 器 来 阻止 冒 泡 继续 的 话 )。 


假设 我 们 有 大 量 的 元 素 ,而 且 这 些 元 素 需要 共享 同一 个 行为 。 如 果 需 要 在 这 些 元 素 上 监听 事 
件 , 我 们 最 好 在 DOM 的 高 层次 , 也 就 是 离 这 些 元 素 最 近 的 公共 祖先 上 或 在 aocument 上 监听 事件 。 
这 样 可 以 节省 大 量 的 内 存 和 CPU 时 间 。 


在 DOM 的 高 层 监听 事件 对 加 载 Ajax 内 容 的 行为 也 有 好 处 。 由 于 你 在 加 载 内 容 的 “外 面 ” 进 
行 监听 ， 因 此 新 添加 进来 的 元 素 会 自动 获得 现 有 的 行为 ， 而 不 需要 在 加 载 后 设置 额外 的 监听 器 。 


不 过 ， 有 了 时 我 们 的 触发 事件 不 会 冒 泡 ， 这 时 我 们 就 需要 对 事件 委托 进行 一 些 hack, 或 是 完 
抛弃 事件 委托 。 毫 无 疑问 ，submit、focus 和 blur 这 些 事件 不 会 冒 泡 一 一 这 使 得 对 共享 表单 及 域 
的 处 理 变 成 了 一 场 慎 梦 。 尽 管 存在 一 些 代码 来 模拟 这 些 事件 的 冒 泡 , 但 这 些 事件 的 不 可 冒 泡 性 仍 
令 人 感到 不 爽 。 


需要 指出 的 是 ， 直 到 1.4 版 本 ，jQuery 的 1ive() 方 法 才 开 始 在 本 质 上 灵活 地 支持 事件 委托 ， 
而 且 不 会 带 来 性 能 问题 。 也 是 从 那个 版 本 开始 , jQuery 增加 了 操作 非 冒 泡 事 件 的 能 力 。 此 外 ，Dojo 
的 behavior () 看 起 来 像 是 使 用 了 事件 代理 , 但 其 实 并 非 如 此 。 实 际 上 它 只 是 一 个 不 错 的 语法 糖 。 


注意 示例 代码 第 2 行 上 的 findElement () 调 用 。 当 前， 我 们 的 链接 只 包含 一 段 简 单 的 文本 ， 
所 以 在 链接 内 部 单 击 也 就 意味 着 单 击 链 接 本 身 。 不 过 , 假设 你 在 这 个 链接 上 面 加 了 一 个 图 标 ( 比 
如 说 一 个 加 / 减 图 标 ), 那么 单 击 可 能 发 生 在 图 标 上 , 但 它 仍 然 是 单 击 链接 事件 。 因 此 , 在 Prototype 
中 指派 一 个 基于 委托 的 事件 代理 处 理 器 时 , 请 使 用 事件 的 findElement () 方 法 ,而 非 不 太 智 能 的 
element () 方 法 。 
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切换 条 目 内 容 


dom/delegation.html 


<ul id="items"> 
<! 一 我 们 将 使 用 JS 在 每 个 LI 中 插入 切换 器 --> 
<li><div><p>Data 1</p><p>Data 2</p></div></1li> 
<li><div><p>Data 1</p><p>Data 2</p></div></1li> 
<li><div><p>Data 1</p><p>Data 2</p></div></1li> 
<!-- 下 面 可 能 会 有 更 多 的 元 素 …… --> 


</ul> 


这 是 一 段 基于 Prototype 的 脚本 : 


dom/delegation.js 


$('items').observe('click', function(e) { 
var trigger = e.findElement('a.toggler'); 


if (!trigger) return; 

e.stop(); 

var content = trigger.up('p').next('div'); 

if (!content) return; 

content .toggle(); 

trigger.update(content.visible() ? 'Close' : 'Open'); 


trigger.blur(); 
ee 


S('items').select('li').each(function(item) { 
item.insert({ top: '<p><a class="toggler" href="#">Open</a></p>' }); 


item.down('div') .hide(); 
be 


使 用 事件 代理 


// Prototype 1.7 


$('items').on('click', 'a.toggler', handlerFx) ; 

// jQuery 1.4 

S('a.toggler', '‘'#items').live('click', handlerFx) ; 

// YUI3 

Y.delegate('click', handlerFx, '#items', ‘'a.toggler'); 
// Ext 


Ext.get('items').on('click', handlerFx, this, { delegate: 'a.toggler' }); 


相关 任务 


OQ 任务 8 
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任务 10 ”将 行为 和 自 定义 事件 解 耦 


当 你 的 代码 库 增 长 到 一 定 的 规模 ,或 者 你 打算 在 一 个 完全 不 同 的 上 下 文 复 用 部 分 代码 时 ,你 
可 能 就 会 磁 到 这 样 的 情形 : 不 管 DOM 是 什么 样子 ， 我 希望 这 段 代 码 在 这 样 的 情况 下 被 触发 。 


多 数 情况 下 ， 这 个 问题 涉及 微 件 (widget) 间 的 交互 。 比 如 说 ， 某 些 后 台 聊 天 轮 询 引 擎 会 通 
知 聊天 部 件 收 到 了 新 信息 , 或 者 当 图 片 浏览 窗 中 的 某 个 图 片 被 单 击 后 ,对 应 的 图 片 浏览 控件 和 预 
载 入 图 片 放大 控件 均 会 被 告知 这 个 操作 的 发 生 。 


这 就 是 自 定义 事件 的 概念 。 根 据 你 使 用 的 框架 不 同 ， 自 定义 事件 的 行为 在 某 些 方面 会 有 所 
差异 。 


O 类 似 DOM 的 行为 : 你 在 DOM 节 点 (包括 aocument 对 象 ) 监听 并 触发 自 定 义 事件 。 这 些 事 
件 既 可 以 冒 泡 ， 也 可 以 被 拦截 。 这 正 是 Prototype、jQuery 和 MooTools 所 做 的 。 如 果 事 件 不 
能 扩散 ， 就 必须 在 触发 事件 的 对 象 上 进行 监听 。 

命名 空间 : 一 些 框架 需要 你 为 你 的 事件 指定 命名 空间 , 通常 使 用 一 个 冒号 前 绥 来 把 你 的 事 
件 和 原生 事件 区 分 开 来 。 Prototype 强 制 要 求 这 种 做 法 ; 其 他 框架 则 允许 你 按照 你 习惯 的 方 
式 命名 自 定义 事件 。 

自 定义 额外 数据 ”: JavaScript 框 架 人 允许 你 在 触发 自 定 义 事件 时 ， 向 事件 处 理 器 传送 额外 的 
数据 。Prototype 接 受 一 个 单独 的 额外 参数 (当然 ,这 个 参数 里 可 以 包含 各 种 各 样 的 内 容 )， 
以 作为 事件 memo 属 性 的 内 容 。 除了 初始 事件 对 象 参 数 以 外 , jQuery 可 以 向 事件 处 理 器 传递 
任意 数量 的 额外 参数 。 其 余 的 框架 会 把 这 些 参数 在 不 加 前 绥 的 情况 下 传递 给 事件 处 理 器 。 
Dojo 需 要 把 待 传 的 参数 放 到 一 个 数组 里 传递 ， 即 使 参数 只 有 一 个 也 是 如 此 。 

通用 事件 API， 只 有 Dojo 保 留 了 操作 原生 DOM 事 件 的 正常 API， 而 操作 自 定 义 事件 则 需要 
特殊 的 发 布 /订阅 API。 这 也 意味 着 Dojo 中 的 自 定 义 事件 不 具有 DOM 事 件 的 一 些 行为 〈 比 
如 冒 泡 )。 

声明 : 我 们 往往 需要 在 预定 义 的 事件 中 加 入 一 些 特殊 的 变化 〈 例 如 ， 需 要 Alt 键 按 下 才能 
触发 的 单 击 事件 )，MooTools 允 许 你 定义 此 类 自 定义 事件 。 此 类 事件 需要 预先 声明 ， 即 便 
你 只 是 声明 它们 的 名 字 。 任 何 未 声明 的 自 定义 事件 都 不 会 被 触发 。 









































口 








口 























口 





口 














® 原文 为 payload， 在 这 里 它 指 的 是 传 给 事件 处 理 函 数 的 额外 数据 。* 
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监听 一 个 自 定义 事件 


// Prototype -- 通 过 event .memo 传 入 额外 数据 

$s (element) .observe('ns:event', handlerFx) 
document .observe( 'ns:event', handlerFx) 
// jQuery -- 通过 多 余 的 参数 传 入 额外 数据 
$(elementOrSelector) .bind('event', handlerFx) 
// MooTools -- 通过 事件 处 理 器 参数 传 入 额外 数据 
Element.Events.event = {}; 

$ (element) .addEvent ('event', handlerFx) 
// YUL3 ~~ 通过 事件 处 理 器 参数 传 入 额外 数据 
Y.on('event', handlerFx) 

// Dojo -- 通过 事件 处 理 器 参数 传 入 额外 数据 


dojo.subscribe('event', context, handlerFx) 
触发 一 个 自 定义 事件 


// Prototype 

$(element).fire('custom:event'); 
document.fire('custom:event'); 
whichever.fire('custom:event', { foo: 'bar', baz: 42 }); 
// jQuery 

$ (elements) .trigger('event') 
S(elements).trigger('event', { foo: 'bar', baz: 42 }); 
S(elements).trigger('event', ['bar', 42]); 

// MooTools 

$(element).fireEvent ('event') 
$(element).fireEvent('event', arg) 

document .fireEvent ('event', [argl, arg2, arg3]) 

// YUI3 

Y.fire('event') 

Y.fire('event', argl, arg2, arg3) 


// Dojo 
dojo.publish('event ') 
dojo.publish('event', [arg]) 


相关 任务 


OQ 任务 8 
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任务 11 模拟 后 台 处 理 


有 时 ， 你 会 需要 在 网 页 里 进行 一 个 相当 耗 时 的 处 理 ， 比 如 ， 从 一 个 表 中 得 到 一 个 数据 集 ， 经 

过 各 种 计算 〈 可 能 需要 相当 长 的 时 间 ) ， 最 后 得 到 一 个 图 表 。 你 希望 在 这 个 过 程 中 页 面 仍然 能 够 

得 到 正常 的 响应 ， 这 就 需要 用 到 后 台 处 理 技术 。 

这 是 因为 JavaScript 引 | 擎 会 以 如 下 方式 执行 你 的 代码 。 

口 JavaScript 本 质 上 是 单线 程 的 。 

O 你 的 JavaScript 运 行 线程 实际 上 和 你 的 页 面 共 享 了 同样 的 资源 。 这 也 意味 着 ， 当 你 的 
JavaScript 代 码 运行 的 时 候 ， 任 何 页 面 澄 染 都 不 会 发 生 。 新 的 内 容 不 会 出 现 ， 内 容 无 法 重 
排 ， 甚 至 被 其 他 窗 体 所 遮挡 的 页 面 也 无 法 被 重 绘 ……: 总 之 ， 什 么 都 不 能 做 。 

所 以 ， 如 果 你 的 页 面 在 执行 一 些 密集 的 计算 ， 那 么 直到 处 理 结 束 前 页 面 都 不 会 有 响应 。 这 通 

党 意 味 着 整个 浏览 器 都 会 失去 响应 。 为 了 防止 出 现 这 种 情况 ,一 些 浏览 器 提供 了 “中 断 运行 时 间 

过 长 的 脚本 ”的 功能 。 而 其 他 浏览 器 ， 例 如 Chrome， 则 会 为 每 个 页 面 开 一 个 独立 的 进程 ， 以 处 

理 这 个 问题 。 























如 果 不 使 用 Web Workers”( 至 少 现在 来 看 ， 这 显然 不 是 一 个 跨 浏览 器 的 选择 ) 的 话 ， 你 就 需 
要 使 用 一 些 伪 并 行 处 理 的 技巧 ， 此 类 技巧 一 般 依赖 于 全 局 window 对 象 提 供 的 一 对 方法 一 一 


setTimeout () 和 clearTimeOut () 。 


这 些 技巧 的 思路 是 把 一 个 大 型 任务 分 解 成 若干 个 小 步骤 ,然后 一 边 执行 这 些 步骤 ,一 边 记录 
任务 的 进度 ,并 在 固定 的 时 延 对 这 些 步骤 进行 调度 。 当 一 个 步骤 完成 之 后 ， 经 过 一 段 时 间 再 启动 
下 一 个 步骤 。 在 这 段 空 闪 的 时 间 里 , 浏览 器 会 恢复 对 页 面 的 控制 ,因此 就 可 以 正常 地 处 理 页 面 行 
为 ， 并 运行 其 他 待 执 行 脚本 。 

虽然 调用 clearTimeout () 来 清理 调用 setTimeout () 时 所 存储 的 定时 器 处 理 器 并 不 是 必需 
的 ， 但 这 是 一 个 良好 的 编码 实践 ， 它 可 以 减少 内 存 的 消耗 ， 而 且 不 会 带 来 多 少 性 能 上 的 开销 。 

尽管 这 个 技巧 适合 用 于 密集 计算 处 理 任务 , 但 是 它 并 不 适合 那些 需要 平 请 过 渡 的 行为 ,比如 
视觉 效果 ， 因 为 定时 器 的 精度 很 差 (在 25ms~500ms 变 化 )。 在 这 种 情况 下 ， 你 需要 使 用 一 个 具有 
精确 固定 间隔 的 定时 器 ”。 











= 








© PEyLhttp://en.wikipedia.org/wiki/Web_worker, * 
@ 如 果 想 要 了 解 具体 的 实现 方式 , 请 阅读 Thomas Fuch 编 写 的 这 个 50 行 的 绝妙 程序 Emile: http://github.com/madrobby/ 
emile, 





任务 11 
调度 及 停止 代码 的 执行 
利用 定时 器 模拟 后 台 处 理 需 要 两 个 核心 方法 : 


var handle = window.setTimeout (callback, intervalInMs); 
window.clearTimeout (handle) ; 


让 用 户 切换 后 台 处 理 





本 书 的 在 线 源 码 库 (dom/background.js) 中 包含 了 一 个 完整 的 演示 。 


下 面 是 这 个 例子 中 的 关键 代码 : 


dom/background.js 
var CHUNK_INTERVAL = 25 ; // 单 位 为 毫秒 
var running = false, progress = 0, processTimer; 


function runChunk() { 
window.clearTimeout (processTimer) ; 
processTimer = null; 
if (!running) return; 
// 模拟 任务 的 各 个 步骤 
for (var i = 0; i < 10000; i += (Math.random() * 5).round() ) 
++progress; 
updateUl(); // 用 来 更 新 一 个 进度 条 ， 请 到 在 线 源码 库 了 解 更 多 的 细节 
if(progress < 100){ 
processTimer = window.setTimeout (runChunk, CHUNK_INTERVAL) ; 
} else { 
progress = 0, running = false; 
} 
} 


function toggleProcessing () { 
running = !running; 
if (running) { 
processTimer = window.setTimeout (runChunk, CHUNK_INTERVAL) ; 
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Ul 技巧 





操作 DOM 是 我 们 的 基本 工具 ， 每 个 操作 最 终 都 是 在 操作 DOM。 但 实际 的 需求 往往 要 比 单 
纯 操 作 DOM 更 抽象 ， 比 如 实现 有 用 的 用 户 界面 (UL) 特效、 功能 和 微 件 ， 有 效 地 处 理 表 单 等 。 
在 这 一 部 分 ， 我 们 将 开始 学 习 这 些 实用 的 UI 功能 。 





O 任务 12 会 探讨 如 何 制 作 既 好 看 又 与 上 下 文 相关 的 “ 泡 泡 ” 提 示 。 

O 尽管 弹 窗 的 效果 不 错 ， 但 在 不 能 用 JavaScript 的 情况 下 也 应 该 要 能 访问 那些 内 容 才 对 。 
在 任务 13 中 可 以 看 到 怎样 同时 处 理 好 这 两 种 情况 (启用 JavaScript 和 禁用 JavaScript)。 
O 图 片 预 载 入 并 不 总 是 能 用 CSS spriting 实现 (比如 预 载 入 用 户 提 供 的 图 片 )。 为 了 处 理 这 
种 情况 ， 任 务 14 说 明了 如 何 用 JavaScript 做 到 这 一 点 。 

O 光 箱 (通过 瞳 化 页 面 的 其 余部 分 而 被 突出 显示 的 伪 对 话 框 ) 的 合理 使 用 可 以 创造 简洁 的 
用 户 体 验 。 任 务 15 展示 了 最 佳 的 解决 方案 。 

O 有 时 ， 大 数据 集 浏览 用 智能 翻 页 实现 效果 更 好 。 任 务 16 阐明 了 这 一 点 。 

口 有 时 ， 你 需要 载 入 新 的 内 容 ， 而 这 些 内 容 要 加 在 触发 载 入 的 元 素 所 在 页 面 位 置 的 上 方 。 
为 了 避免 页 面 晃动 ， 看 看 任务 17。 


本 书后 面 会 用 框架 和 库 来 减轻 工作 量 。 一 般 我 都 用 Prototype (但 光 箱 特效 的 任务 用 jQuery 
插件 ， 因 为 它 看 起 来 是 完成 这 个 特殊 任务 的 最 佳 工具 )。 

















诚然 ，Prototype 不 一 定 吸引 每 位 前 端 开发 者 ， 所 以 看 看 本 书 代码 的 GitHub RENE, "我 的 目 
的 是 让 大 家 能 创建 对 应 的 分 支 (forks)， 用 自己 最 喜欢 的 JavaScript 框架 来 改写 。 这 样 一 来 ， 你 
就 能 得 到 用 你 喜欢 的 框架 写 的 代码 。 如 果 还 没 人 写 出 你 喜欢 的 框架 ， 你 不 妨 自己 着 手写 一 个 。 











© 参见 http://github.com/tdd/pragmatic-javascript。 
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任务 12 ”打造 漂亮 的 tooltip 


保守 地 说 ，HTML 自 带 的 tooltip (用 title= 实现 ) 并 不 可 靠 。 自 动 换行 、 拉 伸 与 截断 之 间 
的 相互 作用 、 换 行 以 及 显示 延迟 ， 这 些 都 随 浏览 器 和 用 户 而 变 。 而 且 那 只 是 纯 文 本 提示 一 一 没有 
样式 ， 当 然 也 没有 标记 结构 。 


为 了 打造 漂亮 的 tooltip， 我 们 需要 自己 动手 实现 ， 放置 一 些 元 素 ， 在 鼠标 移 人 或 移出 页 面 特 
定 区 域 时 显示 或 者 隐藏 它们 (或 者 可 以 在 用 户 使 用 Tab 切 换 焦点 时 显示 或 隐藏 , 这 样 可 能 更 好 用 )。 








由 于 本 书 主题 是 JavaScript, 我 就 不 深究 CSS 代 码 了 。 另 外, 我 只 做 简单 的 设计 : 这 里 的 tooltip 
不 会 覆盖 触发 元 素 的 显示 、 不 跟随 鼠标 移动 ， 也 不 在 里 面 提供 鼠标 操作 的 UI。 

所 以 ， 根 据 我 们 的 目的 ， 实 现 的 关键 是 ， 用 CSS 属 性 设置 tooltip 元 素 为 默认 隐藏 ， 并 在 其 容 
器 标签 上 (不 一 定 是 链接 ) 加 :hover 选择 器 来 恢复 其 显示 ， 如 下 图 所 示 。 





000o Pulling off classy tooltips - Pocket JavaScript 
[a [e st | file: ///users /tdd/perso/livres /JSPocket/Book/code/ui/tooltips/index.htm’ © MQ- Google > 
[© EE Cells Apotomo Ext3 API YUI3 API MooTools API jQuery API Dojo API La neutralit...- Framablog 

















Pulling off classy tooltips 


e Capacity: 1.5 TB 
se Interface: SATA 
e Technology: SSD | Enough for 50,000 songs, 1,000 DivX movies, 
100,000 high-definition photos, hundreds of iDVD 
projects and plenty of backup space left. 















但 这 种 实现 方式 在 IE6 中 不 起 作用 ， 因 为 IE6 只 人 允许 <a> 元 素 上 有 :hover。 这 时 只 能 手动 编 
写 一 段 脚本 以 响应 mouseover 和 mouseout 。 由 于 Prototype 实 现 show() 和 higde() 的 方式 比较 特殊 ， 
因此 疫 办 法 用 CSS 预 先 隐 藏 tooltip 一 一 这 就 是 为 什么 要 在 右 页 的 CSS 样 例 中 针对 IE6 做 一 些 特殊 设 
置 的 原因 。 





如 果 要 实现 更 高 级 的 需求 ， 你 有 很 大 几率 能 在 众多 tooltip 库 中 找到 合适 的 一 一 它们 要 么 是 直 
接 写 在 框架 里 ， 要 么 是 基于 某 个 框架 。 就 我 个 人 而 言 ， 最 喜欢 的 是 Prototype 的 tooltip 库 一 一 无 比 
强大 的 Prototip2。” 











© 参见 http://www.nickstakenburg.com/projects/prototip2/。 
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tooltip 的 HTML 代 码 


ui/tooltips/index.html 


<li tabindex="1"> 
<span class="name">Capacity: 1.5 TB</span> 
<div class="tooltip" > 
<p><strong>1.5 Terabyte = 1,536 Gigabytes</strong></p> 
<p>Enough for 50,000 songs, 1,000 DivX movies, 100,000 
high-definition photos, hundreds of iDVD projects and 
plenty of backup space left.</p> 
</div> 
</li> 


设置 tooltip 样 式 


ui/tooltips/tooltips.css 


#files li { position: relative; } 
#files li .tooltip { 
position: absolute; top: 8px; left: 120px; width: 24em; 
z-index: 1; display: none; 
/* IE6 不 识别 1i:hover， 所 以 我 们 需要 用 JS 触 发 ， 
因此 避免 使 用 内 置 的 display: none */ 
_display: block; 
border: 1px solid gray; 
background: #fffdc3 url(bg_tooltip.png) top left repeat-x; 
} 
#files li:hover .tooltip, 
#files li:focus .tooltip { display: block; } 


处 理 IE6 的 脚本 〈IE6 中 :hover 只 对 链接 有 效 ) 


ui/tooltips/tooltips.js 


function toggle(reveal, e) { 
var trigger = e.findElement('li'), 
tooltip = trigger && trigger.down('.tooltip'); 
if (!tooltip) return; 
tooltip[reveal ? 'show' : '‘hide'](); 


} 


document .observe('dom:loaded', function() { 
var isIE6 = Prototype.Browser.IE && 


undefined === document .body.style.maxHeight; 
if (!isIE6) return; 
var files = $('files'), tooltips = files && files.select('.tooltip'); 
if (!files || 0 == tooltips.length) return; 


tooltips.invoke('hide'); 
files.observe('mouseover', toggle.curry (true) ) . 
observe ('mouseout', toggle.curry (false) ) ; 
be 
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任务 13 制作 友好 的 弹 窗 


不 管用 “ 真 ” 弹 窗 (单独 的 窗口 ) 还 是 “ 伪 ” 弹 窗 (实际 是 当前 页 面 的 元 素 ， 只 是 设置 成 类 
似 窗口 的 样式 )， 都 会 碰 到 这 个 问题 ， 如 何 让 那些 不 能 (或 者 不 想 ) 打开 新 窗口 的 用 户 访问 这 些 
内 容 ? 想 想 窗口 弹出 被 禁用 的 情况 以 及 屏幕 阅读 器 "、 搜 索引 区 的 访问 等 。 


只 有 一 种 办 法 : 先 让 链接 真正 链接 到 弹 窗 的 内 容 ， 然 后 从 那里 开始 逐步 地 改善 效果 。 


如 果 你 的 内 容 是 要 作为 HTML 片段 显示 在 伪 弹 窗 中 (可 能 还 通过 Ajax 载 入 )， ~~ 不 管 带 不 
带 document 标 记 , 你 都 需要 确保 在 另 一 处 提供 其 访问 路 径 。 那样 一 来 , 用 户 就 能 通过 普通 的 链接 ， 
以 单独 页 面 的 形式 访问 到 它 ， 看 到 好 的 效果 。 


实际 操作 的 要 点 是 : 用 <a> 标 签 链接 到 要 弹出 的 内 容 (href=， 或 许 还 要 加 上 target= 
"blank" )， 然 后 给 这 些 链接 挂 上 JavaScript 代 码 ， 让 它们 活动 起 来 。 窗 口 弹出 代码 很 简单 一 一 
就 是 用 内 置 的 windqow.open () 方 法 。 

如 果 需 要 伪 弹 窗 或 者 光 箱 , 一 定 要 使 用 优秀 的 现 有 库 以 远离 地 狱 般 的 跨 浏 览 器 问题 和 布局 算 
法 。 这 里 有 一 些 可 选项 
O Scripty2 的 UI 部 分 ” 
Q jQuery UI® 
Q Dijit (基于 Dojo) ° 
DYUI 的 覆盖 模块 ” 
Q Ext.Window® 


另外 要 记 住 ， 如 果 弹 窗 内 容 较 少 的 话 ， 使 用 单 击 触 发 的 tooltip 就 足够 了 ， 而 不 必 使 用 全 功能 
的 弹 窗 。 如 有 果 遇 到 这 种 情况 ， 查 查 tooltip 库 和 模块 。 





























O 屏幕 阅读 器 将 屏幕 上 的 文字 、 图 形 等 转换 成 语音 或 盲文 ， 帮 助 视觉 障碍 者 操作 电脑 。 如 果 未 做 仔细 的 处 理 ， 弹 
的 内 容 可 能 无 法 被 屏幕 阅读 器 访问 。* 

© 参见 http://github.com/madrobby/scripty2。 

@ 参见 http://jqueryui.com/。 

© 参见 http://dojotoolkit.org/projects/dijit。 

© 参见 http://developer.yahoo.com/yui/3/overlay/。 

© 参见 http:/www.extjs.com/deploy/dev/docs/?class=Ext.Window。 





RY 
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用 于 渐进 式 效 果 提 升 的 HTML 代 码 


ui/popups/index.html 


<p> 
The great thing about <a class="popup" target="_blank" 
href="http://pragprog.com/titles/pg_js">Pocket Guide to JavaScript</a> 
is that it focuses on a bunch of specific, useful tasks.</p> 


普通 的 window .open() 脚 本 


ui/popups/popups.js 


var POPUP_FEATURES = 'status=yes,resizable=yes,scrollbars=yes,' + 
'width=800, height=500, left=100,top=100'; 


function hookPopupLink(e) { 
var trigger = e.findElement('a.popup'); 
if (!trigger) return; 
6.stoo(); trigger. blur (); 
var wndName = trigger.readAttribute('target') | 
('wnd' + trigger.identify()); 
window.open(trigger.href, wndName, POPUP_FEATURES) .focus(); 


document.observe('click', hookPopupLink) ; 


相关 任务 


口 任务 12 
a 任务 15 
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任务 14 预 载 入 图 片 


页 面 可 能 会 提供 切换 图 片 的 用 户 交 互 操作 ， 比 如 切换 为 放大 或 特写 的 图 片 、 前 /后 视角 图 片 
的 切换 等 。 这 时 ， 由 于 要 用 来 切换 的 那 张 图 片 需要 载 和 时间， 用 户 会 看 到 瞬间 的 空白 , 你 肯定 不 
希望 做 成 这 样 。 这 就 需要 你 预 载 人 那 张 要 用 的 图 片 。 


总 体 来 看 ， 只 有 三 种 预 载 入 图 片 的 方法 。 


O 用 JavaScript 动 态 创建 带 有 合适 src 属 性 的 Image 对 象 :这 种 方法 允许 检测 预 载 入 图 片 何 时 

真 的 被 载 和 人 了。 

用 CSS 隐 藏 已 载 入 了 的 图 片 : 这 其 实 就 是 给 要 预 载 和 的 图 片 使 用 隐藏 的 <img> 标签 。 可 
以 隐藏 <img> 标签 本 身 ， 也 可 以 隐藏 这 些 <img> 标签 的 公共 容器 标签 (我 更 倾向 于 隐 忠 
公共 容器 标签 ) 。 

O 使 用 CSS sprites: 如 果 打算 预 载 入 rollover 这 类 东西 或 者 一 批 相 关联 的 图 片 〈 比 如 背景 、 

边框 、 边 角 ) ， 这 无 疑 是 更 好 的 办 法 。” 


CSS 较 为 直接 ， 不 过 其 控制 能 力 不 及 JavaScript。 右 页 的 标记 和 脚本 代码 做 了 如 下 假设 : 假设 
每 个 所 在 的 <img> 标签 中 带 有 rel="preloadzoom" 属性 的 图 片 在 同样 的 URI 下 都 有 一 份 特写 版 
本 ， 其 文件 名 加 有 closeup 后 绥 。 特 写 版 本 的 图 片 将 被 预 载 入 ， 以 实现 特写 rollover 效 果 。 


通 营 在 这 种 情况 下 用 JavaScript 比 CSS 好 。 因 为 rollover 功 能 本 身 要 用 JavaScript 实 现 ， 所 以 我 
们 就 用 JavaScript 做 预 载 入 (这样 的 话 如 果 用 户 环境 不 支持 JavaScript， 就 没 必 要 载 和 人 不 会 被 显示 
的 图 片 了 )。 此 外 ， 用 JavaScript 预 载 入 可 以 避免 标记 及 样式 膨胀 。 

如 果 是 用 JavaScript， 只 要 我 们 在 确定 预 载 入 完成 之 后 再 做 切换 ， 就 能 避免 出 现 瞬时 空白 或 
不 完整 显示 。 而 不 使 用 sprite 的 CSS 则 有 可 能 会 切换 到 尚未 载 和 的 图 片 (诚然 ， 这 样 的 可 能 性 其 
实 很 小 ) 。 

想 要 了 解 更 多 关于 快速 图 片 载 入 的 核心 技巧 , 请 看 Steve Souder 2009 年 5 月 的 演讲 稿 
图 片 载 入 的 14 条 法 则 。® 









































快速 











O 指 一 个 图 片 ， 当 鼠标 移 到 上 面 就 变 成 另 一 个 图 片 ， 鼠 标 移 开 又 变 回来 。* 

© 即 “14 rules for faster-loading images”, 看 看 原创 的 http:/www.alistapart.comyarticles/sprites 和 最 近 的 http:/css-tricks.comy/ 
css-sprites/, Steve Souders 同 时 也 维护 了 一 个 SpriteMe 工 具 : http://spriteme.org/, 

© # Whttp://stevesouders.com/docs/wordcamp-20090530.ppt. 
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实现 预 载 入 功能 的 HTML 代 码 


ui/preloading/index.html 


<ul id="products"> 
<li><h2><a href="http://pragprog.com/titles/cppsu"> 


<img rel="preloadZoom" src="cppsu.jpg" alt="" /> 
<span>Prototype and script.aculo.us</span> 

</a></h2></1li> 

<li><h2><a href="http://pragprog.com/titles/vsscala"> 
<img rel="preloadZoom" src="vsscala.jpg" alt="" /> 
<span>Programming Scala</span> 

</a></h2></1i> 

</ul> 


实现 预 载 入 功能 的 JavaScript 代 码 
ui/preloading/preloading.js 
function preloadiImages() { 
SS ('img[rel="preloadZoom"]').each(function(img) { 
var pimg = new Image(); 


pimg.src = img.src.replace(/(\.\w+$)/, '_closeupS1'); 
Dee 


document .observe('dom:loaded', preloadImages) ; 
切换 〈 载 入 完成 的 ) 图 片 


ui/preloading/preloading.js 


function togglePreloaded(e) { 
var trigger = e.findElement('img[rel="preloadZoom"]'); 


if (!trigger) return; 
if (e.type == 'mouseover') { 

trigger.sre = trigger.src.replace(/(\.\w+S)/, '_closeupSi1'); 
} else { 


trigger.srce = trigger.src.replace('_closeup', ''); 


document .observe('mouseover', togglePreloaded) . 
observe('mouseout', togglePreloaded) ; 
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任务 15 创造 光 箱 特效 
光 箱 效果 指 的 是 突出 显示 出 一 部 分 内 容 ， 同 时 用 屏蔽 单 击 的 重合 层 暗 化 页 面 其 余 内 容 的 操 
作 。 光 箱 一 般 显 示 在 页 面 中 央 ， 通 常 是 图 片 ， 由 页 面 上 的 文本 或 缩 略 图 链接 触发 ， 如 下 图 所 示 。 


e00 Creating a lightbox effect 
a ‘es /JSPocket/Book/code/ui/light! ni 














本 书 的 例子 中 , 我 们 通过 Janis Skamelis 的 FancyBox jQuery 插件 来 实现 把 缩 略 图 放大 成 原始 图 
片 的 光 箱 效果 。 这 个 插件 很 友好 ， 比 较 轻 便 ， 也 易于 插入 ,而 且 看 上 去 异常 绚丽 。 但 如 果 你 有 共 
趣 的 话 ， 也 不 妨 看 一 下 这 个 demo 的 页 面 底部 列 出 的 别 的 实现 方式 。 


FancyBox 不 只 限于 显示 图 片 ， 实 际 上 它 能 显示 任何 内 容 ， 其 至 是 <iframe> 。 如 果 链 接 的 目 
标 URI 看 上 去 既 “ 不 像 图 片 文件 ”也 没 用 iframe， 它 会 默认 用 即时 Ajax 载 入 ， 比 如 ， 可 以 通过 不 
带 扩展 名 的 URL 来 按 需 载 入 较 大 的 图 片 。 


和 大 多 数 UI 相 关 的 库 相 似 ，FancyBox 需 要 载 和 至少 各 一 个 JS 文件 和 CSS 文 件 。 它 会 假设 自己 
需要 用 的 图 片 和 CSS 文 件 放 在 在 同一 目录 下 ， 以 免 去 调整 CSS 的 麻烦 。 FancyBox 对 光 箱 图 片 的 
URL 没 有 要 求 。 

要 把 链接 做 成 光 箱 ， 只 需要 选取 那些 链接 ， 然 后 调用 它们 的 fancybox() 方 法 ， 正 如 右 页 的 
代码 所 示 。 既 可 以 不 带 参数 直接 调用 该 方法 ， 也 可 以 传人 参数 来 对 一 些 选项 进行 设置 。 我 希望 看 
到 缩 略图 动态 放大 到 原始 大 小 ， 因 此 就 做 了 相应 的 设置 。 
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载 入 FancyBox 


ui/lightbox/index.html 


<link rel="stylesheet" type="text/css" 
href="vendor/fancybox/jquery.fancybox-1.2.6.css" /> 
<script type="text/javascript" src="vendor/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" 
src= "vendor/fancybox/jquery. fancybox-1.2.6.pack.js"></script> 


链接 到 单个 图 片 


ui/lightbox/index.html 


<a href="beach_normal.jpg" title="A gorgeous beach"> 
<img src="beach.jpg" alt="Beach" /> 
</a> 


链接 到 一 组 可 切换 浏览 的 图 片 


ui/lightbox/index.html 


<li> 
<a href="beach_normal.jpg" rel="demo" title="A gorgeous beach"> 
<img src="beach.jpg" alt="Beach" /> 
</a> 
</li> 
<li> 
<a href="feline_normal.jpg" rel="demo" title="A cute cub"> 
<img src="feline.jpg" alt="Feline" /> 
</a> 
</li> 


初始 化 FancyBox ( 放 了 些 自 定义 参数 ) 


ui/lightbox/lightbox.js 


S(function() { 
S('#thumbnails a').fancybox({ 
zoomSpeedin: 300, zoomOpacity: true, overlayColor: '#000', 
overlayOpacity: 0.6 
Fs 
DE 


相关 任务 


O 任务 12 
O 任务 13 
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任务 16 实现 “无 限 翻 页 ” 


无 限 翻 页 是 Gmail 给 我 们 带 来 的 概念 ， 它 在 几 个 应 用 场景 下 的 应 用 宣告 了 分 页 导航 的 末日 。 
许多 人 (尽管 不 是 所 有 人 ) 都 发 现 ， 在 浏览 大 量 条 目 时 无 限 翻 页 更 有 效 ， 于 是 就 都 倾向 于 使 用 视 
觉 模式 匹配 ， 而 不 是 移动 鼠标 去 一 次 又 一 次 地 单 击 分 页 链接 。 


分 页 导航 几乎 只 是 基于 技术 原因 提出 的 。 


a 老 版 浏览 器 泻 染 慢 ， 这 使 我 们 不 得 不 保持 页 面 “ 足 够 轻便 ”。 

O 客户 端 和 服务 器 之 间 任 何 一 处 都 可 能 有 带宽 限制 ， 这 也 要 求 我 们 减少 页 面 大 小 。 

O 服务 器 端的 处 理 时 间 随 着 数据 增多 而 增加 。 一 次 性 演 染 整个 数据 集 不 仅 是 浪费 ， 而 且 对 
服务 器 来 说 也 不 可 行 至少 是 不 现实 和 笨拙 的 )， 尤 其 是 服务 器 想 要 处 理 足够 多 的 并 发 请 
求 时 。 

分 页 导航 只 不 过 是 一 种 方法 ， 一 种 不 用 JavaScript 的 方法 。 启 用 了 JavaScript 之 后 ， 如 果 用 无 

限 翻 页 比较 合适 的 话 ， 你 就 可 以 不 再 用 任何 分 页 链接 ,而 用 无 限 翻 页 来 代 赫 它们 。 至 于 是 否 采用 

无 限 翻 页 ， 这 就 得 交 给 你 的 用 户 可 用 性 专家 以 及 你 的 合理 直觉 来 判断 了 。 


在 右 页 的 代码 中 可 以 看 到 , 无 限 翻 页 并 没有 什么 特别 奇特 的 地 方 。 唯 一 比较 棘手 的 就 是 跨 浏 
览 器 正确 计算 长 度 比 较 麻烦 ， 这 从 lowEnough() 方 法 的 代码 中 可 以 很 明显 地 看 到 。 

我 们 实质 上 是 在 判断 文档 底部 离 当 前 显示 区 域 底 部 是 否 已 不 大 远 。 这 只 不 过 是 足够 频繁 地 检 
查 垂 直 滚 动 条 的 当前 状态 ， 每 秒 10 次 足够 了 ! 然后 用 Ajax 载 入 更 多 内 容 。 

考虑 到 可 用 性 (和 容错 ) ， 你 或 许 也 需要 提供 分 页 导航 : 把 Next 链 接 设 置 为 默认 隐藏 ， 如 果 
Ajax 获取 数据 失败 就 显示 这 些 链接 ， 这 样 用 户 还 可 以 回 到 用 分 页 链接 来 操作 的 状态 。 





























给 手头 没有 PHP 服 务 器 的 读者 一 个 提示 : 作为 demo 来 说 ， 可 以 不 用 访问 服务 器 ， 客 户 端 直 
接 载 和 人 更 多 内 容 就 能 看 到 效果 ， 这 里 的 PHP 代 码 只 不 过 是 在 返回 静态 内 容 前 等 待 半 秒 以 模拟 载 
入 时 间 。 


任务 16 实现 “无 限 翻 页 ” 


判断 是 否 已 滚动 到 足够 低 
ui/infinite/infinite.js 


function lowEnough() { 

var pageHeight = Math.max(document.body.scrollHeight, 
document .body.offsetHeight) ; 

var viewportHeight = window.innerHeight | | 
document .documentElement.clientHeight | | 
document .body.clientHeight || 0; 

var scrollHeight = window.pageyOffset || 
document .documentElement.scrollTop || 
document .body.scrollTop || 0; 

// HR GRI2OR A HY fk KW 

return pageHeight - viewportHeight - scrollHeight < 20; 


监测 滚动 位 置 并 载 入 更 多 内 容 
ui/infinite/infinite.js 


function checkScroll() { 


if (!lowEnough()) return pollScroll(); 
S('spinner').show(); 
new Ajax.Updater('posts', 'more.php', { 


method: 'get', insertion: '‘bottom', 

onComplete: function () 

onSuccess: pollScroll 
be 


{ $('spinner').hide(); }, 


function pollScroll() { setTimeout (checkScroll, 100); } 


pollScroll(); 


< 37 
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任务 17 在 载 入 内 容 时 保持 显示 区 域 


有 时 , 你 可 能 希望 保持 用 户 的 显示 区 域 (也 就 是 在 浏览 器 窗口 中 可 见 的 所 有 东西 ) 固定 不 变 ， 
哪怕 是 用 户 单 击 链 接 以 在 其 上 载 入 更 多 内 容 的 时 候 。 比 如 ， 用 户 单 击 查 看 前 面 的 评论 ,你 不 会 希 
望 在 上 面 载 入 评论 之 后 用 户 的 滚动 位 置 就 被 推 到 下 面 去 了 吧 。 

这 时 ,你 会 发 现 遇 到 了 一 点 小 障碍 。 感 觉 上 用 户 应 该 是 期 望 他 们 的 页 面 位 置 没 有 变化 。 但 是 
在 上 面 载 入 内 容 时 , 你 又 必定 会 把 文档 的 其 余 内 容 , 包括 被 单 击 的 那个 地 方 , 向 显示 区 域 下 方 推 ， 
而 且 很 可 能 推 到 了 显示 区 域 之 外 。 


解决 办 法 是 ， 保 持 相对 于 显示 区 域 的 滚动 位 置 。 要 做 到 这 一 点 ， 我 们 需要 获取 显示 区 域 的 

“滚动 偏 移 "， 即 在 当前 显示 部 分 上 方 载 入 内 容 前 显示 区 域 的 滚动 位 置 ， 然后 在 载 入 内 容 之 后 恢复 
这 个 偏 移 。 计 算 偏 移 非常 麻烦 ， 到 处 纠缠 着 跨 浏 览 器 的 问题 ， 好 在 Prototype 等 JS 库 提供 了 位 置 相 
关 的 功能 来 解决 这 个 问题 。 
右 页 的 代码 改写 自 Sam Stephenson 的 Gist”。 在 载 入 更 多 内 容 前 ， 我 们 先 获 取 触 发 链接 在 整个 
文档 中 的 位 置 (也 就 是 它 的 cumulativeoffset () )， 然 后 从 中 减 去 显示 区 域 的 当前 滚动 位 置 ， 
就 得 到 这 个 触发 链接 在 显示 区 域 中 的 出 现 离 区 域 顶 端的 距离 。 新 内 容 载 和 后， 用 这 个 减法 的 逆 
过 程 就 能 计算 出 显示 区 域 的 新 偏 移 值 。 

熟悉 Prototype 的 读者 也 许 会 奇怪 为 什么 我 这 里 用 的 是 Ajax.Request， 而 没有 用 到 更 具体 的 
Ajax.Updater。 这 是 因为 用 Ajax.Recuest 可 以 尽 可 能 地 推迟 获得 原来 的 滚动 位 置 的 时 间 , BY 
Ajax 请 求 完 成 之 后 再 获得 。 这 样 即使 遇 到 用 户 在 Ajax 请 求 等 待 期 间 滚动 了 页 面 ， 也 可 以 避免 出 
现 诡异 的 “滚动 复位 ”效果 。 


这 样 一 来 ， 只 需 通过 很 少 的 代码 就 实现 了 相当 不 错 的 用 户 体验 。 












































© github 的 代码 片段 粘贴 服务 ， 访 Gist 位 于 https://gist.github.com/134653。* 
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维持 显示 区 域 位 置 

ui/viewport/index.html 

<h2>Comments</h2> 

<div id="extraComments"> 
<a id="loadKnownComments" href="?with_known_comments">See previous 

comments you already know about</a> 

</div> 

<h3>Comment 5</h3> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 


ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat.</p> 


在 Ajax 之 前 获得 滚动 位 置 ， 在 Ajax 之 后 调整 ” 
ui/viewport/viewport.js 


function loadKnownComments(e) { 


e.stop(); 
var zone = $('extraComments'), ref = zone.next('h3'); 
var upd = new Ajax.Request('known_comments.html', { 


method: '‘'get', 
onSuccess: function(res) { 
var orig = ref.cumulativeOffset().top - 
document .viewport.getScrolloOffsets().top; 
zone.insert({ before: res.responseText }); 
window.scrollTo(0, ref.cumulativeOffset().top - orig); 





O 此 处 代码 的 意思 是 “进行 Ajax 请 求 ， 在 插入 新 内 容 之 前 获得 滚动 位 置 ， 并 在 插入 之 后 恢复 位 置 ”。* 





表单 技巧 





表单 是 现代 Web 应 用 中 的 关键 。 我 们 经 常 需要 从 用 户 那 里 采集 信息 ， 以 填写 个 人 资料 、 设 
置 任 务 和 服务 以 及 发 送信 息 。 然 而 ， 现 在 网 上 大 多 数 表单 的 可 用 性 和 人 类 工程 学 都 处 于 令 人 遗 
憾 的 状态 。 在 这 部 分 ， 我 试 着 给 出 儿 个 办 法 ， 它 们 在 处 理 表 单 时 可 以 改善 用 户 体 验 (现在 越 来 
越 多 地 被 称 为 UX”)。 


制作 实用 表单 背后 的 关键 思想 是 : 不 要 浪费 用 户 的 时 间 。 

O 用 任务 18 的 方法 可 避免 用 户 做 两 次 提交 。 

O 让 用 户 知 道 他 们 还 能 输入 多 少 文 本 ， 参 见 任务 19, 

允许 用 户 批量 选择 和 反选 ， 参 见 任务 20。 

O 用 任务 21、 任 务 22 和 任务 23 的 方法 即时 验证 尽 可 能 多 的 用 户 输入 。 我 想 你 肯定 没 听 说 
有 谁 会 喜欢 晚 一 点 发 现 用 户 名 重复 或 者 密码 不 符合 安全 性 要 求 吧 ? 

O 给 填写 特定 输入 区 域 提供 特殊 的 帮助 ， 如 任务 24 所 示 。 

O 你 会 在 任务 25 中 看 到 怎么 做 到 支持 其 他 类 型 的 输入 或 自动 完成 。 

a 任务 26 对 让 用 户 一 次 上 传 多 个 文件 的 技巧 给 出 了 说 明 。 


以 上 只 是 让 表单 更 易于 使 用 的 几 个 例子 。 后 面 的 任务 讲解 中 我 们 具体 讨论 怎么 实现 这 几 个 
例子 。 


当然 ， 永 远 不 要 忘记 ， 你 不 能 认为 JavaScript 理 所 当然 应 该 能 用 。 不 管 怎么 说 ,在 没有 
JavaScript 的 情况 下 ， 你 的 表单 应 该 仍然 可 用 。 也 许 它们 不 那么 好 用 ， 但 必须 可 用 : 服务 器 端 无 
论 如 何必 须 再 次 校 验 所 有 内 容 ， 在 没有 JavaScript 拦截 事件 时 不 能 出 现 不 起 作用 的 链接 等 。 制 
作 表 单 时 ， 渐 进 式 效果 提升 至 关 重 要 。 先 保证 在 没有 JavaScript 或 CSS 支持 时 它们 能 正常 使 用 ， 
然后 再 根据 环境 中 可 用 和 局 用 了 的 技术 逐 层 增加 用 户 体验 。 























© user experience 的 特别 记 法 。* 
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任务 18 暂时 禁用 提交 按钮 


有 时候, 表单 要 花 一 点 时 间 等 待 服务 器 处 理 。 这 有 可 能 是 在 用 老式 的 <input type="file".. 
/> 域 上 传 大 文件 ， 或 者 服务 器 由 于 某 种 原因 还 没 来 得 及 响应 。 无 论 如 何 ， 我 们 不 希望 我 们 还 在 
理 它 的 时 候 用 户 再 次 提交 表单 。 要 知道 遇 到 重复 提交 是 很 邻 人 恼火 的 事 。 

为 了 避免 重复 提交 ， 可 以 禁用 已 提交 过 的 表单 的 所 有 提交 方式 。 这 实际 上 就 是 禁用 带 有 
type="submit" 或 者 type="image" 属 性 的 <input> 或 <button> 标 签 。 由 于 有 的 浏览 器 (比如 “可 
爱 ” 的 MSIE) 对 CSS 属 性 选择 器 处 理 得 不 好 ， 我 们 最 好 还 是 给 这 些 元 素 标记 上 特定 class 属 性 ， 
比如 submit ， 然 后 再 用 这 个 class 属 性 选择 想 禁 用 的 元 素 。 


右 页 的 第 一 段 脚本 通过 很 短 的 Prototype 代 码 实现 了 这 个 功能 。 它 非常 简洁 。 


你 可 能 想 进 一 步 给 表单 加 一 些 等 待 提交 时 的 UI 装饰 一 一 因为 并 非 所 有 的 浏览 器 都 清楚 地 显 
示 被 禁用 的 区 域 ， 而 且 你 也 可 能 想 要 强调 正在 处 理 之 中 (你 肯定 不 只 是 因为 那 东 西 讨厌 所 以 才 
禁用 它 的 吧 )。 


第 二 段 脚本 展示 了 怎样 通过 给 被 禁用 的 <input> 标 签 填 加 自 定义 class 属 性 来 实现 等 待 时 的 
UI 装饰 。 因 为 用 CSS 做 的 UI 更 新 不 像 禁 用 函数 调用 那么 实时 ， 所 以 浏览 器 在 提交 开始 之 前 需要 一 
段 间 区 ,否则 提交 开始 之 后 浏览 器 就 可 能 一 直 处 理 提 交 事 件 ， 而 不 再 响应 UI 更 新 请 求 。 因 而 我 们 
通过 delay () 把 submit () 调 用 延迟 十 分 之 一 秒 。 


另外 ， 注 意 到 这 里 的 JavaScript 代 码 还 用 到 了 that = this 闭 包 技巧 。 你 也 许 知 道 ， 调 用 函 
Be (这 里 是 要 delay () 的 那个 ) 有 可 能 会 丢失 当前 束 定 ， 即 this 引 用 的 值 。 一 种 办 法 是 强制 保 
持 束 定 , 这 需要 一 层 额 外 的 函数 封装 ,比较 麻烦 。 我 们 这 里 用 闭 包 来 让 那个 临时 定义 的 匿名 函数 
中 的 代码 维持 到 原先 的 this (被 提交 的 表单 对 象 ) 的 引用 ， 使 得 在 适当 的 时 候 能 够 调用 它 的 


© 


lea 


























submit ( ) 。 





O WJS HAR (REIL? 在 http:/www.alistapart.comyarticles/getoutbindingsituations/ 上 有 我 的 ALA 文 章 你 可 以 看 
看 。 搞 不 太 清楚 闭 包 ， 也 不 知道 怎么 发 挥 其 作用 ? 我 的 朋友 Juriy “Kangax”Zaytsev 就 这 个 问题 写 了 一 篇 很 标的 
文章 ， 网 址 在 http://msdn.microsoft.com/en-us/scriptjunkie/ff696765.aspx。 
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发 生 submit 事 件 时 禁用 控件 


form/submit/submit.js 


function preventMultipleSubmits() { 
this.select ('.submit').invoke('disable'); 


document .observe('dom:loaded', function() { 
S('commentForm') .observe('submit', preventMultipleSubmits) ; 
b); 


form/submit/index.html 


<form id="commentForm" action="post_comment.php"> 
<p> 
<label for="edtText">Your text</label> 
<textarea id="edtText" name="text" cols="40" rows="5"></textarea> 
</p> 
<p><input type="submit" class="submit" value="Send" /></p> 
</form> 


用 class 属 性 进一步 装饰 〈 稍 显 花哨 ) 


form/submit/submit.js 


function preventMultipleSubmits(e) { 
if (!this.hasClassName('submitting')) { 
e.stop(); 
} 
this.addClassName('submitting').select('.submit').invoke('disable'); 
var that = this; 
(function() { that.submit(); }).delay(0.1); 
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任务 19 ”提供 输入 长 度 反馈 


填写 表单 时 经 常 遇 到 的 令 人 诅 趟 的 事 就 是 看 到 文本 输入 突然 停 下 一 一 即使 有 静态 文字 提示 
最 长 长 度 。 不 止 是 这 个 ， 你 是 否 知道 <textarea> 没 有 maxlength= 属 性 ? 真 的 没有 。 当 然 ， 
<textarea> 不 算 合 法 的 HTML， 可 以 愉快 地 忽略 掉 (除非 你 有 幸 能 用 HTML5 ) 。 


因此 ， 为 了 统一 指定 最 大 长 度 ， 可 以 用 专门 做 “数据 存储 ”的 CSS class 属 性 。 这 些 class 
属性 名 称 由 两 部 分 组 成 : 第 一 部 分 是 maxLength Aya, 第 二 部 分 是 用 来 表示 我 们 想 要 设 定 的 最 大 
长 度 的 正 整 数 。 见 右 页 中 的 HTML 代 码 。 

然后 我 们 用 JavaScript 进 行 以 下 操作 。 


(1) 动态 装饰 包含 这 些 元 素 的 表单 区 域 (简单 起 见 ， 我 假设 用 段落 来 包含 。 右 页 中 的 JS 代 码 
给 段落 加 上 了 class 属 性 )， 然 后 动态 创建 用 于 显示 剩余 长 度 反 馈 的 占 位 符 。 

(2) 根据 当前 输入 状态 初始 化 反馈 区 域 。 

(3) 为 按键 事件 绑 定 合适 的 事件 监听 器 。 

(4) 放置 反馈 区 域 (我 放 在 对 应 输入 区 域 右 下 角 下 )， 人 然后 把 它 加 入 文档 中 。 现 在 就 能 看 到 效 
RT! 


这 样 每 当 发 生 按键 输入 时 ， 只 需要 更 新 反馈 即 可 。 如 果 达 到 或 者 超出 最 大 长 度 (当然 ,这 在 
<textatrea> 上 不 可 能 发 生 ) ， 就 回 退 到 最 大 人 允许 长 度 。 


另外 ， 注意 这 份 代码 中 的 几 个 技巧 。 


O 我 们 对 keyup 和 keypress 这 两 个 事件 都 做 了 监听 , 以 对 非 字 符 按键 〈 多 半 是 删除 、 剪 切 和 
粘贴 ) 和 字符 按键 都 作出 响应 。 没有 必要 监听 keyaqown, 因为 它 是 在 文本 改变 之 前 发 生 的 ， 
而 此 时 我 们 没 办 法 跨 浏 览 器 和 键盘 布局 判断 文本 是 否 会 改变 。 

o 为 避免 每 次 按键 都 重复 计算 最 长 长 度 , 我 们 在 初始 化 时 把 它 缓存 起 来 。 为 了 把 最 长 长 度 和 
输入 区 域 关 联 起 来 我 们 用 了 JavaScript 关 联 数组 ,这 个 关联 数组 关联 了 输入 区 域 的 id= 属 
性 "和 输入 区 域 对 象 本 身 。 这 比 用 更 多 的 属性 要 轻便 点 。 


























Q@ 这 里 用 Prototype 的 identify () 来 保证 我 们 的 元 素 一 定 有 一 个 id= 属 性 。 
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用 HTML 指 定 最 大 长 度 
form/feedback/index.html 


<p> 
<label for="edtDescription">Description</label> 
<textarea id="edtDescription" name="description" cols="40" 
rows="5" class="maxLength200"></textarea> 
</p> 


为 最 大 长 度 域 绑 定 反馈 事件 

form/feedback/feedback.js 

var maxLengths = {}; 

function bindMaxLengthFeedbacks() { 
var mlClass, maxLength, feedback; 


SS('*[class*®=maxLength]').each(function(field) { 
field.up('p').addClassName( 'lengthFeedback ') 


mlClass = field.className.match(/\bmaxLength(\d+)\b/) [0]; 
maxLength = parseInt (mlClass.replace(/\D+/g, ''), 10); 

feedback = new Element('span', { ‘'class': 'feedback' }); 

maxLengths[field.identify()] = [maxLength, feedback]; 


updateFeedback (field); 
field.observe('keyup', updateFeedback). 
observe('keypress', updateFeedback) ; 


feedback.clonePosition(field, { setHeight: false, 
offsetTop: field.offsetHeight + 2 }); 
field.insert({ after: feedback }); 
} 


即时 给 出 反馈 
form/feedback/feedback.js 


function updateFeedback(e) { 

var field = e.tagName ? e : e.element(); 

var current = field.getValue().length, 
data = maxLengths[field.id], max = data[0], 
delta = current < max ? max - current : 0; 

data[1].update('Remaining: ' + delta); 

if (current > max) { 
field.setValue(field.getValue().substring(0, max)); 
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任务 20 同时 选择 或 反选 多 个 checkbox 
常常 会 遇 到 这 种 情况 : 有 一 个 列表 , 这 上 面 有 用 户 希 望 一 并 完成 的 操作 。 要 把 列表 中 多 项 的 
某 个 属性 一 起 删除 、 移 动 、 保 存 和 改变 ， 首 先 需要 让 用 户 选 择 出 特定 的 项 。 


有 时 需要 进行 全 选 。 在 这 种 情况 下 ， 列 表 长 的 时 候 就 会 让 人 很 难受 ， 所 以 说 批量 切换 选择 
状态 是 不 错 的 UI 功 能 ， 如 下 图 所 示 。 





口 Subject Date From Size 
O Happy new year! Jan 1,2010 00:03am Drew Barrimore 1.6Kb 
© What's that great IT book publisher again? Jan 1,2010 11:25am David McClintock 2.3Kb 
O You gotta check this out... Jan 2, 2010 02:15pm Julianne Moore 4.2Kb g 


对 应 的 HTML 很 简单 。 在 表格 的 表 头 放 一 个 checkbox 作 为 切换 选 框 。 这 自动 指定 了 其 作用 域 ， 
能 让 我 们 的 脚本 代码 找到 对 应 的 <tbody>， 把 它 作为 要 处 理 的 那些 checkbox 的 容器 。 


脚本 本 身 也 很 清楚 : 对 切换 选 框 的 单 击 作 出 反应 ， 也 就 是 在 对 应 的 <tbody> 中 找到 那些 
checkbox 并 更 新 它们 的 checked= 属 性 ， 这 样 就 实现 了 多 个 checkbox 状 态 的 切换 。 


现在 不 妨 练习 一 下 ， 改 写 这 段 代 码 以 达到 以 下 两 个 目标 。 


O 人 允许 页 面 中 存在 多 个 表格 ， 每 个 表格 都 带 一 个 切换 选 框 。 这 意味 着 要 把 idq= 替 换 为 class 
属性 ， 然 后 用 事件 委托 来 避免 广 册 过 多 的 监听 器 。 

O 设法 处 理 更 复杂 的 表格 ， 即 每 个 表格 中 有 不 只 一 个 <tbody>。 是 的 ， 这 是 有 效 的 HTML 
标记 (用 某 种 方式 给 数据 分 组 时 ， 一 个 body 就 是 表 的 一 个 语义 节 )。 有 趣 的 是 ， 加 上 不 止 
一 个 的 <tbody> 反 而 会 简化 脚本 代码 ! 
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对 应 的 HTML 


form/checklist/index_for_book.html 


<table id="mailbox"> 
<thead> 
<tr> 
<th><input type="checkbox" id="toggler" /></th> 
<th>Subject</th> 
<th>Date</th> 
<!-- 格式 ， 大 小 ， 附 件 …… a> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td><input type="checkbox" name="mail_ids[]" value="1" /></td> 
<td>Happy new year!</td> 
<td>Jan 1, 2010 00:03am</td> 
<!-- ee — 一 > 
</tr> 


</tbody> 
</table> 


把 选择 状态 传播 给 每 行 开头 的 checkbox 


form/checklist/checklist.js 


function toggleAllCheckboxes() { 
var scope = this.up('table').down('tbody'), boxes = scope && 
scope.select('tr input [type="checkbox"]:first-of-type'); 
var refChecked = this.checked; 
(boxes || []).each(function(box) { box.checked = refChecked; }); 


document.observe('dom:loaded', function() { 
S('toggler') .observe('click', toggleAllCheckboxes) ; 
EIs 
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任务 21 表单 验证 : 基本 技巧 


客户 端 验 证 是 必需 的 。 真 的 。 用 户 的 连接 否 吐 量 就 不 用 说 了 ,把 本 可 以 直接 在 浏览 器 上 做 的 
任何 验证 都 传 到 服务 器 上 绕 一 圈 是 非常 可 耻 的 。 你 肯定 想 让 你 的 网 页 值得 自豪 吧 , 所 以 让 我 们 开 
始 吧 ! 


第 一 个 任务 关注 最 基本 的 验证 : 必 填 输入 项 。 也 就 是 检验 特定 输入 区 域 是 否 不 为 空 或 者 被 选 
中 等 。 我 们 约定 ， 用 required 这 个 CSS class 属 性 标记 这 种 输入 区 域 ， 之 后 设置 样式 来 给 未 填 的 
必 填 输入 项 提供 视觉 反馈 。 


首先 ， 确 保 要 截取 到 表单 的 submit 事 件 ， 而 不 是 submit 按 钮 的 click 事 件 或 者 文本 域 的 
(Return) 按键 。 在 提交 到 服务 器 端 之 前 截获 表单 的 唯一 可 靠 方式 就 是 截取 它 的 supmit 事 件 。 它 甚 
至 还 可 以 截获 到 代码 引起 的 提交 (form.submit () 调 用 )。 

一 旦 挂 上 submit 事 件 , 就 只 需要 获取 表单 中 所 有 标记 为 requiregd 的 元 素 , 然后 检验 它们 是 否 
为 非 空 值 。 用 Prototype 对 String 的 blank () 扩 展 能 很 方便 地 检验 是 否 非 空 。 只 含 空白 符 的 字符 串 ， 
可 以 认为 是 空 ， 因 为 语义 上 看 它们 比 实际 的 空 串 好 不 到 哪 去 。 然 而 需要 注意 ， 如 果 输 入 区 域 可 以 
接受 只 含 空白 符 的 字符 串 ， 要 改 为 用 if (field.getvalue()) 来 判断 一 一 在 JavaScript 中 ， 空 串 等 
价 于 false。 


右 页 的 JavaScript 代 码 维护 一 个 firstoffender 引 用 ， 这 用 来 自动 定位 到 第 一 个 出 问题 的 输 
入 项 ， 有 助 于 用 户 矫正 输入 。 另 外 ， 做 完 检 验 后 ， 如 果 发 现 至 少 有 一 个 问题 ， 就 通过 stop () 来 
终止 这 个 事件 ， 不 提交 当前 表单 。 


最 后 ， 还 有 一 个 提示 ， 这 算是 另 一 层面 的 问题 : nternet Explorer 中 的 submit 事 件 不 会 冒 泡 。 
因此 ， 如 果 你 的 代码 需要 在 正中 正常 运行 ， 你 就 得 给 页 面 里 每 个 要 检验 的 表单 (包括 初始 DOM 
载 入 之 后 动态 插入 的 ) 绑 定 事件 监听 器 。jQuery 自 1.4 版 之 后 在 卫 中 对 submit 事 件 进行 了 模拟 冒 
泡 ， 但 这 是 以 监视 所 有 表单 中 的 所 有 单 击 和 按键 为 代价 的 ， 这 个 代价 有 点 大 。 
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必 填 输入 项 的 HTML 代 码 


form/validation101/index_for_book.html 


<form id="registration"> 
<p> 
<label for="user first name">First name*</label> 
<input type="text" name="user/[first _ name]" id="user_first_name" 
class="required text" /> 
</p> 
ye sessed 更 多 输入 域 …… aes 
<p class="radios"> 
<input type="checkbox" id="terms" name="terms" class="required" /> 
<label for="terms">I accept the terms of service* </label> 
</p> 
<p><input type="submit" value="Sign me up!" /></p> 
</form> 


仿 测 未 填 的 必 填 项 
form/validation101/validation101.js 


function checkForm(e) { 
var firstOffender, value; 
this.select('.required').each(function(field) { 
value = field.getValue(); 


if (value && !value.blank()) { 
field.up('p').removeClassName('missing'); 
} else { 
firstoOffender = firstOffender || field; 
field.up('p').addClassName('missing'); 
} 
DE 
if (firstOffender) { e.stop(); firstOffender.focus(); } 


document .observe('dom:loaded', function() { 
S('registration') .observe('submit', checkForm) ; 
DE 


相关 任务 


O 任务 22 
口 任务 23 
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任务 22 ”表单 验证 : 进 阶 技巧 


前 一 个 任务 检查 了 必 填 项 是 否 确实 填 上 或 者 选中 。 这 很 好 。 不 过 , 我们 时 常 还 需要 文本 域 的 
输入 符合 某 种 特定 格式 ， 比 如 电话 号 码 、email 地 址 、 整 数 或 者 更 一 般 的 数字 。 这 些 文本 域 可 能 
已 填写 ， 但 不 符合 格式 ， 所 以 我 们 要 尽 可 能 预先 查 出 来 。 这 通常 是 对 服务 器 端 检查 的 补充 ， 而 服 
务 器 端 必定 会 再 次 做 检查 。 


这 一 般 都 用 正则 表达 式 来 做 ， 它 十 分 清晰 有 效 。 如 果 你 做 程序 开发 直到 现在 还 没有 习惯 正 
则 表达 式 ， 最 好 抽 几 个 小 时 沟 心 研究 一 下 ， 这 会 对 你 有 很 大 的 帮助 。 虽 然 正则 表达 式 在 新 手 看 来 
RRM, 但 是 它们 只 有 很 少 的 语法 "规则 (大 约 有 一 打 , 学 会 其 中 一 半 通 常 就 够 用 了 )。 学 会 “ 正 
则 式 ” 会 节省 你 无 数 的 编码 时 间 。 网 上 有 很 多 不 错 的 交互 式 教程 。 


右 页 代码 中 的 思路 是 ， 检 测 表单 项 的 CSS class 属 性 ， 进 行 对 应 的 正则 式 检查 。 这 里 我 只 列 
了 三 个 正则 表达 式 , 你 可 以 在 FIELD_PATTERNS 表 里 添加 更 多 的 键 - 值 对 以 扩展 其 功能 。 为 了 防止 
和 纯粹 主义 者 ”多 费 口舌 ， 我 需要 先 做 些 解释 。 是 的 ,这 里 写 的 表达 式 没 有 履 盖 非 十 进 制 的 数字 ， 
小 数 的 科学 计数 法 ， 以 及 现在 大 约 百 分 之 0.1 的 email 地 址 。 不 过 别 忘 了 ， 这 个 任务 是 讲 表 单 域 验 
证 ， 而 不 是 讲 正则 表达 式 技巧 。 随 便 改 这 些 式 子 以 满足 你 的 需要 ! 


代码 很 简短 明确 , 我 只 想 闸 明 两 点 。 第 一 , SF (element) 国 数 其 实 是 element .getValue () 
的 缩写 。 

第 二 ， 如 果 你 曾 在 JavaScript 里 用 过 正则 表达 式 的 话 ， 你 很 有 可 能 是 一 直 在 用 通用 的 
myString.match(myPattern) 。 这 是 可 以 的 ， 因为 如 果 没 有 匹配 ， 它 会 返回 nul1， 否则 会 返回 
匹配 项 (或 者 匹配 组 ) 的 数组 。 但 当 你 只 想 知道 是 否 有 匹配 ， 而 不 关心 匹配 的 具体 内 容 时 ， 就 应 
该 反 过 来 问 这 个 问题 一 一 让 正则 表达 式 来 test () 那个 String， 这 只 返回 Boolean 值 。 

实际 上 test () 更 耐用 ， 即 使 传 给 它 的 不 是 stzing 的 值 ， 它 也 不 会 出 问题 。 而 在 不 是 string 
的 值 上 调用 match () 的 话 , 程序 就 会 月 涡 。 还 有 个 附带 好 处 就 是 test () 运行 速度 稍微 快 一 点 ,我 
自然 想 利 用 上 这 点 性 能 ， 尤 其 是 在 这 不 会 损失 代码 可 读 性 (或 者 增加 代码 量 ) 的 情况 下 。 
































O 一 个 用 来 描述 或 者 匹配 一 系列 符合 某 个 语法 规则 的 字符 串 的 单个 字符 串 。 在 很 多 文本 编辑 器 或 其 他 工具 里 ， 正 则 
表达 式 通 常 被 用 来 检索 及 蔡 换 那些 符合 某 个 模式 的 文本 内 容 。 许 多 程序 设计 语言 都 支持 利用 正则 表达 式 进行 字符 

串 操 作 。 正 则 表达 式 的 基本 构造 元 素 是 : 或 (1)、 重 复 (*) 和 优先 级 (O). * 

@ 也 有 译文 法 、 名 法 的 ， 指 语言 的 构造 规范 。* 

© 希望 保持 一 个 东西 的 真正 本 质 ， 而 不 摊 和 杂质 或 受到 稀释 的 人 。* 





























标记 有 特定 格式 要 求 的 输入 域 


form/validation102/index.html 


<p> 


<label for="user_email">Email*</label> 
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<input type="text" name="userfemail]" id="user_email" 


class="required text email" /> 


</p> 
<p> 


<label for="user_favnumber">Favorite number</label> 
<input type="text" name="user/[favnumber]" id="user_favnumber" 


class="text number" /> 
</p> 


检查 特定 格式 的 输入 域 


form/validation102/validation102.js 


var FIELD_PATTERNS = { 
integer: /*\d+S/, 
number: /*\d+(?:\.\d+)?S/, 


email: /*[A-Z0-9._%+-]+@(?: [A-Z0-9-]+\.) 


ae 


function checkField(field) { 


var value = S$F(field).toString().strip(); 
for (var pattern in FIELD_PATTERNS) 
if (!field.hasClassName (pattern) ) 





+[A-2] {2,6}$/i 


continue; 


if (!FIELD_PATTERNS[pattern].test(value)) return false; 


} 


return true; 


相关 任务 


口 任务 21 
口 任务 23 
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任务 23 ”表单 验证 : 高 级 技巧 


前 两 个 任务 ， 即 任务 21 和 任务 22， 检 查 了 必 填 输入 域 和 输入 文本 的 格式 。 我 们 现在 要 和 服务 
器 端 通信 ， 做 更 提前 的 检查 。 


这 是 本 书 第 一 次 使 用 Ajax。Ajax 是 在 JavaScript 调 试 中 相当 烦人 的 地 方 。 要 是 你 还 没有 阅读 附 
录 B 的 话 ， 请 先 读 一 遍 。 附 录 B 的 信息 对 你 整改 事件 驱动 或 Ajax 驱 动 的 代码 具有 不 可 估量 的 价值 。 


oe cna snd tes 0 a ce 
我 们 这 里 就 实现 登 

Ajax 验 证 的 重要 特点 是 即时 动态 (on-the-fly) UI 反馈 ， 比 如 提示 正在 检查 和 提示 检查 结果 ， 
因此 HTML 标 记得 要 预先 留 出 这 些 元 素 的 位 置 。 你 也 需要 设计 用 哪 种 触发 方式 ， 也 许 会 对 不 同 的 
输入 域 进行 不 同 的 选择 。 是 在 输入 同时 "检查 (用 高 频率 的 输入 域 轮 询 ) 还 是 在 输入 完成 之 后 检 

A (用 状态 改变 事件 ) ? 在 这 个 例子 中 , 我 用 前 一 种 方法 实现 Prototype 的 Fiela.Observer 机 制 ”。 
我 设置 了 0.8”″ 的 时 间 间 隔 "， 这 样 不 至 于 给 打字 慢 的 用 户 施加 太 大 压力 。 


我 们 假定 系统 要 求 登录 名 至 少 要 有 两 个 字符 ， 所 以 没 必要 对 更 短 的 输入 做 Ajax 查 询 , 这 里 的 
检查 就 忽略 掉 空 串 或 者 单个 字符 的 输入 。 当 有 了 两 个 以 上 字符 之 后 ， 它 才 向 服务 器 端 检查 脚本 发 
送 Ajax GET 请 求 ， 然 后 根据 HTTP 响应 代码 (2xx = 成 功 ， 其 他 的 都 表示 失败 。 特 别 要 检查 是 否 
有 响应 状态 ， 因 为 Opera 名 略 了 许多 4xx 的 返回 码 ) 适当 地 更 新 反馈 UI。 

我 在 服务 器 端 那 边 放 了 段 短小 的 伪 检 查 代码 。 这 段 代 码 模拟 了 网 络 连接 的 等 待 时 间 ， 使 我 
们 偶尔 能 看 到 旋转 的 等 待 图 标 。 另 外 ， 它 根据 你 输入 的 登录 名 是 否 已 知 ,返回 适当 的 HTTP 响应 
代码 。 


























= 











© 在 一 个 输入 域 输入 按键 的 同时 * 

@ 完成 一 个 输入 域 的 文本 输入 ， 跳 到 另 一 个 输入 域 的 时 候 。* 

© 用 法 是 new Form.Element .Observer (element，fredquency，callback)，Field 是 Form.Element 的 
缩写 。* 

@ 是 的 ，geeky 的 朋友 ， 我 应 该 说 “1.25 Hz 频率 ”。 
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登录 名 域 的 HTML 代 码 


form/validation_ajax/index.html 


<p> 
<label for="user_login">Login*</label> 
<input type="text" name="user/[login]" id="user_login" 
class="required text" /> 
<span class="feedback" style="display: none;"></span> 
<img src="spinner.gif" class="spinner" style="display: none;" /> 
</p> 


监测 登录 名 域 


form/validation_ajax/validation_ajax.js 


document .observe('dom:loaded', function checkLogin() { 
var feedback = $('user_login') .next('.feedback'), 


spinner = $('user_login') .next('.spinner'); 

new Field.Observer('user_login', 0.8, function(_, value) { 
if (value.length < 2) return; 
feedback. hide(); spinner.show(); 


new Ajax.Request ('check_login.php', { 
method: 'get', parameters: { login: value }, 
onComplete: function(res) { 
if (Ajax.activeRequestCount > 1) return; 
if (res.request.success() && res.status) { 


feedback.update('Login available!') .removeClassName('ko'); 
} else { 

feedback.update('Login taken!').addClassName('ko'); 
} 
spinner.hide(); feedback.show(); 


Fr 
be 
} 

有 


模拟 登录 名 检查 


form/validation_ajax/check_login.php 


<?php 

sleep(rand(5, 10) / 10.0); // 模拟 网 络 间 的 延迟 …… 

SRESERVED = array('bob', 'doudou', 'tdd', 'meshak', 'ook'); 

Slogin = isset(S_GET['login']) ? S_GET['login'] : ''; 

Sresponse = in_array(Slogin, SRESERVED) ? '422 Conflict' : '202 Accepted'; 
header('HTTP/1.1 ' . Sresponse); 


T 
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任务 24 在 表单 中 提供 动态 的 帮助 tooltip 


有 时， 我们 在 网 上 放 有 复杂 的 表单 。 表 单 域 可 能 有 高 层 语义 或 者 非 平 几 的 输入 规则 ， 如 下 图 
所 示 。 例 如 ， 或 许 要 强调 密码 域 的 复杂 性 要 求 。 这 时 ， 最 有 效 (虽然 不 太 礼 貌 ) 的 做 法 就 是 直接 
写 出 来 警告 用 户 。 但 如 果 多 个 输入 域 都 需要 详细 的 警告 和 说 明 ， 表 单 就 会 变 得 拥挤 而 零乱 。 


Login* C7) \@ Logins must de unique, at least 


3 characters long, and may only 











Password* use letters, numbers, white 
y space, hyphens, underscores 
First name* and periods. 
Last name* 
( Sign up ) 


AARI. PEE EARRA A tooltip, REEMA ERE (也 就 是 
当 输 入 域 获得 焦点 时 ) 出 现 。 简 单 来 说 ， 这 是 把 任务 12 的 做 法 用 到 了 表单 上 。 

注意 ，tooltip 放 置 的 最 佳 位 置 是 在 label 标 签 里 ,而 不 只 是 在 同一 <p> 标 签 里 。 这 样 如 果 是 请 
人 用 户 使 用 的 话 ， 这 些 信息 可 以 不 受 屏幕 阅读 器 的 当前 模式 影响 ， 始 终 能 被 获取 到 ”。 

CSS 样 式 , 尤其 是 这 些 tooltip 的 位 置 , 对 本 任务 很 重要 , 所 以 我 在 下 一 页 给 出 了 部 分 CSS 代 码 。 
但 这 诚然 是 一 个 简单 的 例子 。 在 代码 和 效果 上 它 都 可 以 变 得 更 复杂 : 用 库 来 给 focus 和 blur 事 件 
模拟 实现 弹出 效果 ， 就 可 以 不 必 给 每 个 相关 域 都 手动 注册 事件 监听 器 。 笔 者 写 到 这 里 时 ， 最 新 的 
jQuery 已 经 能 直接 作出 渐变 弹出 效果 "， 你 应 该 能 在 你 喜欢 的 JavaScript 框 架 找到 这 个 多 少 有 点 官 
方 的 插件 。 














O 屏幕 阅读 器 一 般 会 根据 当前 选中 的 表单 输入 元 素 读 出 关联 的 <label> 标签 中 的 文字 ， 而 不 一 定 会 阅读 同一 <p> 
标签 中 的 文字 。* 
© 应 该 是 指 jQuery 1.4.1 版 (2010-1-25 发 布 ) 中 新 增 的 .live ("focus") Fil.live("blur"), * 
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把 tooltip 放 在 有 用 的 地 方 


form/tooltips/index.html 


<p> 
<label for="user login"> 
Login* 
<span class="tooltip" style="display: none;"> 
Logins must be unique, at least 3 characters long, 
and may only use letters, numbers, white space, 
hyphens, underscores and periods. 
</span> 
</label> 
<input type="text" id="user login" name="user[login]" 
class="required text" /> 
</p> 


设置 一 致 、 简 明 的 外 观 样式 


form/tooltips/tooltips.css 


#registration label { float: left; width: 6em; position: relative; zoom: 


#registration input.text { width: 14em; } 
#registration .tooltip { 
display: block; position: absolute; left: 24em; top: 0; 
padding: 0.35em 0.5em 0.35em 2em; width: 15em; 
border: 1px solid silver; 
color: gray; font-size: 80%; 
background: #ffc url(lightbulb.png) 0.5em 0.3em no-repeat; 


聚焦 时 显示 ， 失 焦 时 隐藏 


form/tooltips/tooltips.js 


document .observe('dom:loaded', function() { 


var attr = Prototype.Browser.IE ? ‘'htmlFor' : 'for'; 
function showTooltip() { 
var tooltip = $S$('label['tattr+'="'+this.id+'"] .tooltip').first(); 


tooltip && tooltip.show(); 
} 
function hideTooltip() { 

var tooltip = $$('label['tattr+'="'+this.id+'"] .tooltip').first(); 

tooltip && tooltip.hide(); 





S('registration').getInputs().invoke('observe', '‘'focus', showTooltip). 


invoke('observe', 'blur', hideTooltip); 
} 


iy 


} 
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任务 25 自动 完成 输入 


在 表单 提交 到 服务 器 端 之 前 就 验证 输入 有 不 错 的 效果 。 还 有 更 好 的 用 户 体验 吗 ? 有 ! 那 就 是 
， 用 户 输入 的 同时 做 验证 。 将 用 户 的 当前 输入 和 数据 库 中 的 有 效 且 合法 输入 进行 匹配 ， 我 们 可 

给 用 户 提供 输入 建议 。 这 些 建议 不 仅 能 帮助 用 户 修正 拼写 等 方面 的 错误 ,还 能 自动 完成 出 现在 
表 中 的 常用 项 ， 省 去 用 户 手动 输入 这 些 文本 的 麻烦 ， 如 下 图 所 示 。 








Local search: 


Ajax search: hai | (capitals of the world) 





dr pr" 
Pyongyang (North Korea) 


传统 上 ， 这 被 称 为 自动 完成 。 唯 一 的 问题 是 ， 你 要 用 的 数据 源 " 是 预先 取 到 客户 端 (以 简单 
数组 的 形式 ， 或 者 用 复杂 点 的 结构 化 的 东西 ， 比 如 JSON 字 面 量 ) ， 还 是 就 让 它 放 在 服务 器 上 ， 随 
用 户 键盘 输入 不 断 地 去 查询 。 


这 里 有 一 条 不 错 的 经 验 法 则 : 如 果 数 据 源 的 数据 量 足 够 小 〈 比 如 是 要 参考 的 州 名 、 货 币 单 
位 或 者 某 个 品牌 的 各 种 型 号 名 称 )， 那 就 把 它 预 取 到 JS 里 (比如 说 在 初始 化 页 面 时 给 它 生成 
JavaScript 字 面 量 ) ， 否 则 就 应 该 用 Ajax。 使 用 Ajax 需要 调 好 查询 频率 ， 即 使 遇 到 网 速 慢 或 者 用 户 
打字 快 也 要 保证 良好 的 用 户 体验 。 


Script.aculo.us 1.8 有 个 不 错 的 自动 完成 控件 ， 它 有 大 量 的 配置 参数 。 我 这 里 就 用 它 来 做 自动 
完成 ,当然 要 包括 它 所 基于 的 Prototype 库 。 根 据 数 据 源 的 位 置 不 同 ,选择 用 Autocompleter.Local 
还 是 用 Ajax.Autocompleter (我 知道 这 个 命名 不 是 很 一 致 ， 但 我 也 只 能 对 此 表示 遗憾 )。 前 一 
种 情况 需要 指定 数据 源 数组 ， 然 后 用 一 些 参数 (fullsearch、 partialSearch, partialChars 
和 iognorecase) 调整 匹配 行为 ， 后 一 种 情况 则 是 提供 Ajax 的 基本 URI 以 及 那些 Ajax 相关 的 配置 ， 
包括 要 发 给 服务 器 端的 参数 。 





O 用 来 做 匹配 的 数据 。* 
© 美国 的 各 个 州 (state) 的 名 称 。* 
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自动 完成 的 HTML 代 码 


form/autocompletion/index.html 


<div class="p" id="local"> 
<label for="edtCachedSearch">Local search:</label> 
<input type="text" id="edtCachedSearch" name="search" type="text" /> 
<div class="completions"></div> 

</div> 


设置 可 读 性 更 好 的 样式 
form/autocompletion/autocompletion.css 


-completions { 
border: 1px solid silver; background: white; font-size: 80%; z-index: 2; 
} 
.completions ul { margin: 0; padding: 0; list-style-type: none; } 
.completions li { line-height: 1.5em; white-space: nowrap; 
overflow: hidden; } 
.completions li.selected { background: #ffa; } 
.completions strong { color: green; } 


用 客户 端 里 的 数据 源 做 自动 完成 
form/autocompletion/autocompletion.js 


var FREQUENT_SEARCHES = [ 


'JavaScript', ‘JavaScript frameworks', 'Prototype', 'jQuery', 'Dojo', 
‘MooTools’, 'Ext', ‘Ext JS', '‘seript.aculo.us', ‘Seripty2', ‘Ajax', 
'XHR*, 42" 

ja 

function initLocalCompletions() { 
var field = $('edtCachedSearch'), zone = field.next('.completions'); 


new Autocompleter.Local(field, zone, FREQUENT_SEARCHES, 
{ fullSearch: true }); 


用 Ajax 做 自动 完成 
form/autocompletion/autocompletion.js 


function initAjaxCompletions() { 
var field = $('edtAjaxSearch'), zone = field.next('.completions'); 
new Ajax.Autocompleter(field, zone, ‘autocomplete.php', { 
method: ‘get', paramName: ‘'search' }); 


相关 任务 
口 任务 23 
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任务 26 使 用 动态 多 文件 上 传 


HTML (在 HTML5 之 前 ) 里 内 置 的 文件 上 传 功能 说 实话 很 让 但 来 。 它 是 单 文件 的 , 没有 上 
传 过 程 反 馈 ， 也 不 能 对 文件 大 小 或 者 文件 类 型 做 过 滤 限 制 等 。 而 且 它 使 用 Base64 编 码 ”， 也 就 是 
说 每 个 上 传 的 文件 都 会 膨胀 33%。 除 非 我 们 用 WebSockets 或 者 SWFUpload 这 种 东西 ， 否 则 我 们 基 
本 上 无 法 摆脱 这 些 限制 。 








= 


然而 ， 通 过 给 用 户 提供 选择 多 个 文件 的 好 用 的 操作 , 我 们 能 提升 一 点 用 户 体验 。 我 在 这 里 所 
说 的 “好 用 ”是 指 “ 不 是 有 多 少 文件 就 用 多 少 文件 上 传 控件 ” 。 我 比较 喜欢 37signals 公 司 在 他 们 
的 产品 "中 显示 待 上 传 文件 列表 的 方式 : 扁平 的 、 图 标 装饰 的 文件 名 列表 , 还 可 以 从 这 个 上 传 “ 队 
列 ” 中 移 除 任意 项 ， 如 下 图 所 示 。 


Use the file selector below as many times as Use the file selector below as many times as you want. 


CR AG PW2009.txt © CR AG PW2009.4 @ 





E| ElodieEtChristophe.jpg @ E| ElodieEtChristophe.jpg © 
ff) foobar.doc @ fi) foobar.doc @ 

( Parcourir... ( Choisir le fichier ) aucun sélectionné 
(Send these files ` (Send these files ) 








秘诀 是 ， 每 当 文件 上 传 控 件 的 值得 到 设置 ”， 就 把 这 个 控件 复制 一 份 ， 把 原始 体 控 件 移 到 那 
个 “队列 ”中 隐藏 起 来 ， 并 重 置 控件 复制 体 的 值 ， 使 其 看 起 来 还 是 空 的 。 下 一 页 的 代码 通过 <ul> 
来 实现 这 个 队列 , 每 选择 一 次 文件 就 合成 一 个 <1i> 来 容纳 文件 上 传 控件 、 文 件 名 和 移 除 图 标 。 只 
是 感觉 这 么 做 会 好 一 点 。 接 下 来 , 需要 对 输入 进行 更 多 控制 (比如 一 次 可 以 选中 多 个 文件 ,做 到 
文件 大 小 及 类 型 限制 )， 但 用 现在 的 <input type="file" > 不 可 能 做 得 到 ， 要 实现 这 些 强大 的 
功能 ， 还 是 用 SwFUploaq 吧 。 








右 页 中 最 后 那 段 JS 代 码 用 了 一 个 小 巧 的 映射 ， 从 而 从 文件 扩展 名 得 到 CSS class 属 性 名 ， 此 
外 ， 还 实现 了 当 队 列 中 的 链接 被 单 击 时 的 队列 项 移 除 操作 。 








D 一 系列 用 字符 的 ASCII 码 在 64 以 下 的 字符 串 来 表示 二 进 制 数据 的 编码 方法 ， 主 要 是 为 了 保证 数据 在 传输 过 程 中 不 
会 被 转 义 。Base64 把 每 三 个 8Bit 的 字 节 转换 为 四 个 6Bit 的 字 节 ， 然 后 把 6Bit 再 添 两 位 高 位 0， 组 成 四 个 8Bit 的 字 届 ， 
所 以 转换 后 的 字符 串 理 论 上 将 要 比 原来 的 长 3。* 

@ Prototype, * 

© 也 就 是 用 那个 控件 选择 了 一 个 文件 。* 
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表单 的 HTML 代 码 
form/uploads/index.html 


<form method="post" action="server.php" enctype="multipart/form-data"> 
<ul id="uploads"></ul> 
<p><input type="file" name="files[]" id="filSelector" /></p> 
<p><input type="submit" value="Send these files" /></p> 

</form> 


将 文件 上 传 项 加 入 队列 


form/uploads/uploads.js 


function queueFile() { 
var fileName = SF(this), clone = this.cloneNode (true); 
var item = new Element('li', { 'class': getFileClass(fileName) }); 
$ (clone) .observe('change', queueFile).setValue(''); 
this.parentNode.appendChild(clone) ; 
item.appendChild(this) ; 
item.appendChild (document .createTextNode (fileName) ) ; 
item.insert ('<button><img src="remove.png" alt="Remove" /></button>'); 
$('uploads') .appendChild(item) ; 


document .observe('dom:loaded', function() { 
$('filSelector') .observe('change', queueFile); 
S('uploads') .observe('click', handleQueueRemoval) ; 
DE 


做 得 更 气派 : 根据 文件 扩展 名 设置 样式 ， 移 除 被 单 击 的 队列 项 
form/uploads/uploads.js 


var ICONS = SH({ word: $w('doc docx'), image: $Sw('jpg jpeg gif png') }); 


function getFileClass(fileName) { 


var ext = (fileName.match(/\.(.+?)$/) II [])[1].toString() .toLowerCase() ; 
var icon = ICONS.detect(function(pair) { return pair[1].include(ext); }); 
return (icon || []) [0]; 


function handleQueueRemoval(e) { 
var trigger = e.findElement('button'); 
trigger && trigger.up('li').remove(); 


服务 器 端 技术 








上 一 部 分 我 们 探讨 了 如 何 尽 可 能 多 地 在 客户 端 校 验 输入 。 在 做 更 复杂 的 校 验 、 自 动 完 成 等 





任务 时 也 开始 涉及 使 用 服务 器 端的 数据 。 大 多 数 Web 应 用 都 用 后 端 来 完成 其 功能 ， 这 一 部 分 的 
主题 就 是 客户 端 如 何 与 后 端 “交谈 ”。 





O 首先 谈 谈 cookie, cookie 是 跨 request 状态 持久 化 的 一 种 早期 方式 ， 可 以 利用 它 为 用 户 
创建 浏览 过 程 的 session， 以 记 住 用 户 的 操作 历史 或 记 住 用 户 。 这 些 都 在 任务 27 中 讲解 。 
存储 在 用 户 硬盘 上 的 持久 化 cookie 也 可 以 在 不 同时 候 的 访问 之 间 “ 记 住 ” 用户， 这 会 比 
较 有 用 。 不 过 很 不 幸 ，JavaScript 自 带 的 cookie 操作 不 怎么 顶 用 ， 我 们 将 看 到 怎样 更 方 
便 地 进行 cookie 处 理 。 

O 然后 集中 探讨 Web2.0 应 用 和 服务 的 核心 部 分 : Ajax。 我 们 先 讲 解 在 不 刷新 页 面 的 情况 下 

与 服务 器 端 通信 的 基本 操作 ， 这 就 是 任务 28 的 内 容 。 

O 接 下 来 ， 在 任务 29 和 任务 30 中 仔细 地 探讨 一 下 JSON。JSON 和 JSON-P 是 在 运行 

JavaScript 的 客户 端 和 任何 服务 器 端 之 间 交 互 数据 的 好 方式 〈 比 用 XML 方便 多 了 )。 

最 后 ， 我 们 讲 讲 与 那些 位 于 不 同 域名 中 的 第 三 方 服务 通信 的 主要 方法 。 这 是 任务 31 和 任 
务 32 的 内 容 。 


调试 Ajax 或 者 JSON-P 调用 有 时 非常 棘手 。 如 果 你 还 没有 读 过 附录 B 的 话 ， 一 定 要 先 去 读 











一 遍 。 在 那里 ， 你 能 找到 调试 所 需 的 所 有 工具 ， 这 些 工 具 使 你 能 方便 地 探查 到 你 的 代码 进行 的 
任何 服务 器 与 客户 端的 交互 ， 因 此 ， 完 全 没 必要 浪费 大 量 时 间 为 此 抓 耳 挠 腮 。 
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任务 27 读 取 及 写 入 cookie 


在 客户 端 直 接 操 作 cookie 有 不 少 用 处 。cookie 持 久 化 可 以 免 去 用 户 每 次 页 面 刷 新 后 做 重复 设 
置 ， 比 如 重 设 表 单 提交 和 地 址 重 定 向 之 后 的 分 页 大 小 和 被 激活 的 选项 卡 (在 选项 卡 控件 中 )， 以 
及 恢复 树 形 控件 中 的 展开 / 折 欠 结 点 状态 。 


不 管用 什么 方式 设置 这 些 cookie (根据 作用 域 或 是 失效 时 间 )， 我 们 能 得 到 的 cookie 子 系统 的 
唯一 真正 接口 是 “第 0 层 的 DOM” 的 document .cookie 属 性 。 这 些 属性 在 读 的 时 候 充 当 getter， 
在 写 的 时 候 充 当 setterdeleter。 然 而 很 不 幸 ， 它 并 没有 进一步 为 每 项 单独 的 cookie 设 置 提 供 简明 的 
接口 。 这 样 写 起 来 感觉 就 像 是 在 直接 读 写 原始 的 HITP 头 部 ! 

于 是 , 为 了 避免 写 起 来 如 此 乏味 ,大 多 数 框架 要 么 直接 提供 ， 要么 通过 某 个 著名 的 插件 提供 
了 对 cookie 的 更 合适 的 访问 方式 。 然 而 cookie 管 理 不 过 是 小 事 一 件 ， 没 必要 靠 框 架 。 即 使 你 确 
实 已 经 在 用 框架 (你 也 应 该 用 框架 )， 而 且 这 个 框架 有 cookie 相 关 的 功能 ， 你 也 有 可 能 不 喜欢 它 
的 API。 





























鉴于 这 些 原因 , 我 在 下 一 页 写 了 个 可 以 单独 使 用 的 JavaScript cookie 辅 助 模块 。 这 个 模块 不 依 
赖 于 任何 框架 ,试图 提供 一 组 便捷 的 API (尤其 在 参数 方面 )。 它 经 过 充分 的 测试 而 且 有 丰富 的 文 
档 说 明 ， 也 许 你 会 想 试 一 试 。 


最 后 ， 你 应 该 记 住 关于 cookie 的 儿 个 事实 。 


o 它们 位 于 客户 端 ， 因 此 处 于 相当 暴露 的 环境 中 。 绝 不 要 在 那里 放 一 些 敏感 信息 ， 除 非 你 
给 它们 加 了 密 ， 并 做 了 坚 国 的 防 篡改 处 理 。 
O 它们 的 容量 非常 有 限 (4KB) ， 不 应 该 用 来 存储 大 量 数据 〈 比 如 历史 记录 、 复 杂 的 购物 车 
内 容 、 文 本 初稿 等 ) 。 

O 它们 可 能 会 不 可 用 ,不 过 这 种 现象 很 少见 。 稍 微 常 见 一 点 的 问题 是 , 由 于 浏览 器 的 安全 策 
略 〈 可 能 是 因为 公司 的 保密 措施 ， 也 可 能 是 用 户 出 于 隐私 考虑 而 以 那 种 方式 配置 了 浏览 
器 )， 设 置 了 失效 期 的 cookie 在 不 同 session 之 间 和 去 失 了 。 


考虑 到 这 些 情况 ， 请 尽量 把 cookie (尤其 是 那些 持续 时 间 长 的 cookie) 作为 Web 程 序 的 附加 
功能 来 使 用 。 

















任务 27 读 取 及 写 入 cookie < 


使 用 框架 或 插件 


// jQuery Cookie 454} (http://code.google.com/p/cookies/) 
.Cookies.set (key, value[, options]) 
.cookies.get (key) 

.cookies. filter (nameRegExp) 
.cookies.del(key[, options] ) 

$.cookies.test () 

// MooTools 

Cookie.write(key, value[, options] ) 
Cookie.read (key) 

Cookie.dispose(key[, options] ) 

// YUI2 Cookie 函数 

YAHOO.util.Cookie.set (name, value[, options]); 
YAHOO.util.Cookie.get(name[, typeOrDecoderCallback]); 
YAHOO.util.Cookie.remove(name[, options]); 

// YUIL>=3 

Y.Cookie.set (name, value[, options]); 
Y.Cookie.get (name[, typeOrDecoderCallback]); 
Y.Cookie.remove(name[, options]); 

// Dojo 

dojo.cookie(name, value[, options] ) 
dojo.cookie (name) 

dojo.cookie(name, null, { expires: -1 }); 

// Ext 

Ext.util.Cookies.set (name, value[, expires][, path][, domain][, secure]) 
Ext.util.Cookies.get (name) 
Ext.util.Cookies.clear (name) 


Ur Ur tr 


使 用 我 那个 可 以 单独 使 用 的 cookie.js 辅 助 模块 


// 这 个 辅助 模块 可 以 在 http://github.com/tdd/cookies-js-helper 获得 
Cookie.get (name) 

Cookie.list ([nameRegExp] ) 

Cookie.set (name, value[, options] ) 
Cookie.remove(name[, options]) 

Cookie.test () 
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任务 28 通过 Ajax 载 入 内 容 ( 同 域名 ) 


因 








执行 Ajax 请 求 ， 尤 其 是 在 当前 页 面 的 同 域名 下 ， 是 当前 许多 Web 应 用 非常 基础 的 构建 部 分 ， 


而 我 有 必要 提 及 如 何在 所 有 主流 框架 下 做 这 件 事 。 然 而 ,不 要 说 一 页 ， 就 算是 十 页 也 不 可 能 讲 


清楚 所 有 的 细节 ， 毕 竞 每 个 框架 都 提供 了 大 量 的 Ajax 设 置 选项 , 需要 很 大 篇 幅 才 能 讲 清楚 怎么 设 


置 Ajax 行 为 。 





ra 














因此 在 右 页 只 会 涉及 一 些 通用 的 特征 , 我 会 在 此 为 你 指出 正确 的 方向 , 提供 几 条 进一步 探索 





的 途径 。 


a 所 有 框架 都 允许 你 用 那 四 个 基本 的 HTTP 请 求 动词 (GET、POST、PUT 和 DELETE) 以 及 

调整 过 的 HTTP 头 部 来 发 送 Ajax 请 求 ， 因 此 你 能 够 和 REST 服 务 等 误 无 障碍 地 交互 。 

O 所 有 框架 都 提供 了 一 组 回调 函数 , 这 样 你 就 能 给 Ajax 响 应 绑 定 自 定义 的 处 理 函 数 , 或 者 在 
请 求生 命 周 期 (开始 、 成 功 及 失败 、 完 成 等 ) 期 间 做 别 的 事 。 常 见 的 Ajax 响 应 格式 ， 比 如 
JavaScript、JSON、JSON-P、XML 和 HTML 都 有 自 带 的 、 自 动 的 解码 方法 (有 时 还 有 自动 
处 理 的 方法 ， 尤 其 是 对 JavaScript 和 JSON-P ) 。 

口 有 几 个 框架 允许 你 为 Ajax 选项 指定 通用 的 默认 值 (比如 jQuery 的 s.ajaxDpefaults) 并 注 
有 册 全 局 回调 函数 〈 通 常 是 用 来 维护 Ajax 指示 器 ， 比 如 著名 的 “spinner””“， 它 对 跨 页 面 的 
所 有 Ajax 请 求 都 有 效 ) 。 

O 不 少 框 架 都 为 表单 的 “Ajax 化 ”提供 了 快捷 的 操作 方法 ， 要 么 是 直接 对 它们 用 HTML 强 制 
序列 化 ”, 要 么 允许 你 调整 序列 化 的 方式 , 例如 , YULIA form, 而 Prototype 为 <form> 
元 素 加 了 request () 操作 。 

O 每 个 框架 都 提供 了 一 些 特定 功能 ， 比 如 文件 上 传 、 基 本 的 HTTP 验 证 、 重 进入 控制 、 请 求 

链 、 响 应 缓存 等 。 

O 要 确保 正确 处 理 Ajax 调 用 的 成 功 情况 以 及 失败 情况 人们 往往 都 会 名 略 或 者 以 糟糕 的 方式 

处 理 Ajax 失败 。 


最 后 一 条 建议 : 用 同步 模式 的 Ajax 基本 上 等 于 是 在 你 的 网 页 上 召唤 邪恶 的 魔鬼 。 如 果 你 想 实 









































现 同 步 ， 那 就 坦率 点 ， 用 正常 的 页 面 重 载 ! 














O 在 页 面 上 显示 出 一 个 不 停 地 动态 循环 旋转 的 图 标 ， 以 标识 当前 Ajax 请 求 正在 进行 之 中 ， 提 示 用 户 耐心 等 待 。* 
@ 把 整个 表单 及 其 填写 内 容 编 码 为 一 个 字符 串 。-- 般 是 对 于 字段 (输入 域 ) 比较 多 的 表单 ， 希 望 通过 Ajax 动态 提交 ， 
因为 逐 项 Ajax 提交 比较 麻烦 ， 所 以 先 整个 序列 化 再 用 Ajax 提交 序列 化 得 到 的 字符 串 。* 







































































任务 28 ”通过 Ajax 载 入 内 容 ( 同 域名 ) 


进行 简单 的 Ajax 请 求 


// Prototype 

new Ajax.Request(url[, options]) 

new Ajax.Updater(container, url[, options] ) 

// jQuery 

S.ajax([settings] ) 

// MooTools 

new Request ( [options] ) 

// YUI<3 

YAHOO.util.Connect.asyncRequest (method, url, callback, postData) 
// YUI>=3 

Y.io(url[, config]) 

// Dojo 

dojo.xhrGet (settings) // or xhrPost, xhrPut, xhrDelete. 
// ExtJS 

Ext.Ajax.request (settings) 


尝试 用 更 细 化 的 、 基 于 Prototype 的 Ajax 


Ajax.Responders.register ({ 


onCreate: function() { $('spinner').show(); }, 
onComplete: function() { 
if (0 == Ajax.activeRequestCount) 


S('spinner') .hide(); 
} 
riz 


new Ajax.Updater({ success: 'latestUsers' }, '/users/latest', { 
method: 'get', 
parameters: { mode: 'summary', threshold: 'auto' }, 
evalScripts: true, 
onFailure: function() { 


logError('We could not fetch the latest logged-in users, sorry.'); 
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任务 29 使 用 JSON 


在 过 去 几 年 间 ，JSON 逐 渐 成 为 了 JavaScript 客 户 端 与 远程 服务 器 之 间 交 换 信 息 的 首选 方式 。 
JSON 格 式 " 实 际 上 是 标准 的 JavaScript 中 字面 量 格式 的 子 集 。JSON 有 一 定 的 局 限 性 ， 但 相对 于 
XML， 它 有 两 个 重要 的 优点 。 


O 它 更 轻便 〈 不 那么 烦琐 ) 。 
O 除了 JavaScript 自 身 ， 它 并 不 依赖 于 其 他 任何 客户 端 语言 来 解释 和 处 理 。 


现在 大 多 数 服务 器 端 语言 都 可 以 把 合适 的 数据 编码 成 JSON 串 ， 以 及 对 收 到 的 JSON 串 进行 解 
码 。 根 据 你 选用 的 语言 , 你 可 能 需要 安装 额外 的 库 (很 容易 Google 到 ), 如 有 果 你 用 的 是 Ruby、PHP、 
Python、Java、ColdFusion 或 者 ASPNET (只 是 列 了 几 项 ) 的 话 ， 可 以 确信 能 找到 这 样 的 库 。 


你 可 以 把 正常 的 整数 下 标 数组 或 者 关联 数组 〈 也 称 哈 希 、 字 典 或 者 映射 ) 编码 成 ISON。 后 
者 的 键 (key) 可 以 是 任何 内 容 (只 要 它们 是 放 在 引号 里 ), 而 值 (value) 可 以 是 数字 、 字 符 串 (BR 
一 些 转 义 外 ). 布尔 值 . null 或 者 是 任意 幢 套 的 正常 /关联 数组 .JSON 解码 比较 简单 , 但 是 生成 JSON 
串 需要 花 一 点 功夫 , 所 以 大 多 数 JavaScript 框 架 都 为 你 实现 了 这 个 功能 。 而 且 它 们 通常 提供 了 针对 
Ajax 请 求 的 特定 JSON 功 能 ， 这 就 更 方便 了 。 

注意 ，JSON 应 该 具有 一 定 的 安全 性 ， 因 此 它 并 不 序列 化 函数 。 合 法 的 JSON 串 应 该 对 应 只 代 
表 数 据 的 对 象 字 面值 ， 当 被 执行 及 解释 的 时 候 ， 它 自己 不 会 有 任何 害处 。 然 而 ， 而 如 果 你 收 到 的 
不 是 有 效 的 JSON 串 , 而 戏 有 对 恶意 函数 的 调用 , 那么 这 就 会 有 危险 。 正 是 因为 这 样 , 大 多 数 JSON 
解析 功能 都 提供 了 在 解析 之 前 检查 或 净化 JSON 串 的 选项 。 


本 任务 的 这 份 代码 实现 了 用 Ajax 获取 JSON 格 式 的 系统 信息 对 象 ， 然 后 用 它 生 成 一 个 表格 ， 
这 其 中 涉及 几 个 简练 的 技巧 。 你 应 该 认真 看 看 它 ! 

最 近 , 流行 一 种 使 用 JSON 的 方式 ， 叫 做 JSON-P。 它 的 做 法 实际 上 是 把 JSON 对 象 传 给 脚本 中 
预定 义 的 回调 函数 。 你 将 在 下 个 任务 中 学 到 关于 它 的 更 多 内 容 。 




















© 正如 在 http:/www.json.org/ 中 定义 的 。 





任务 29 {ISON < 67 


手动 解 /编码 JSON 串 


// 速度 快 ， 不 过 安全 性 依赖 于 jsonString 
var data = eval('(' + jsonString + ')'); 


// 自 带 的 JSON 支持 或 者 json2.js; ， 这 更 安全 一 些 
var data = JSON.parse(jsonString) ; 


JSON.stringify(obj); // 自 带 的 JSON 支持 


用 框架 解 /编码 JSON 串 


// Prototype 带 有 toJSON () 实例 方法 和 eval1JSON ( ) 方法 
Object .toJSON (obj) 
someJsonString.evalJSON([sanitize = false] ) 
// jQuery 

S.parseJSON (someJsonString) 

// Mootools 

JSON.decode(someJsonString[, secure = false] ) 
JSON. encode (obj) 

// YUI 

Y.JSON.parse(someJsonString) 
Y.JSON.stringify (obj) 

// Dojo 

dojo.fromJson(someJsonString) 
dojo.toJson(obj[, prettyPrint = false] ) 

// Ext 

Ext.util.JSON.decode(someJsonString) 
Ext.util.JSON. encode (obj) 


相关 任务 


Q 任务 30 
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任务 30 ”使 用 JSON-P 


要 把 远程 的 结构 化 数据 传 到 JavaScript 客 户 端 ， 最 主要 的 方法 就 是 使 用 SON-P。 它 的 传输 主要 依 
赖 于 动态 生成 的 <script> 标 签 ， 这 会 产生 一 个 有 趣 的 副作用 : 传输 的 数据 可 以 不 限于 同一 来 源 。 
现在 越 来 越 多 的 Web 服 务 和 API (尤其 是 REST 风 格 的 ) 都 提供 了 JSON 格 式 的 输出 和 JSON-P 支 持 。 


其 背后 的 思想 很 简单 :你 得 到 一 份 JavaScript 代 码 ， 这 份 代码 把 正常 的 JSON 字 面 量 作为 参数 
传 给 你 提供 的 回调 函数 。 这 意味 着 回调 函数 预先 由 你 的 代码 提供 并 且 设 为 全 局 可 访问 (这样 不 
是 很 好 ， 但 没有 别 的 办 法 )。 


受 你 的 习惯 以 及 你 对 要 用 JSON-P 的 远程 资源 的 信任 程度 的 影响 , 这 要 么 减轻 了 你 的 负担 (是 
一 种 极 好 的 模仿 跨 域 Ajax 的 方法 ), 要 么 需要 你 做 更 多 的 考虑 (JSON-P 实 质 上 是 在 你 的 页 面 上 运 


Reo 


行 第 三 方 提 供 的 JavaScript ) 。 


如 果 你 只 是 连接 自己 的 服务 器 和 资源 ， 那 就 完全 没 问 题 ， 这 完美 极 了 。 但 如 果 要 连接 并 不 完 
全 信任 的 第 三 方 资源 ， 就 会 比较 麻烦 。 由 于 涉及 的 运行 机 制 (<script> 标 签 )， 你 没 办 法 预 解析 
返回 的 JavaScript 代 码 以 确保 它 只 是 做 一 次 安全 的 JSON-P 回 调 "。 如 果 需 要 预 解析 这 一 中 间 步 又， 
你 就 得 先 用 Ajax 获得 JS 代码 ， 然 而 正如 我 们 在 下 个 任务 中 会 看 到 的 ， 对 于 第 三 方 资 源 ， 这 种 方法 
并 非 在 所 有 的 浏览 器 上 都 可 用 ”。 


不 管 怎么 说 ， 最 终 应 该 是 由 你 自己 来 衡量 远程 JISON-P 提 供 者 的 可 信 程度 与 可 靠 性 。 


我 必须 指出 ， 我 们 用 的 传输 方式 〈 即 动态 <script> 标签 ) 是 把 JSON-P 限 制 为 GET 请 求 ， 
因此 也 就 把 加 载 量 限制 到 了 大 约 4KB (传统 的 GET 限 制 )。 尽 管 后 者 没 办 法 纠正 ， 但 是 只 要 在 服 
务 器 端 做 一 些 修改 ， 我 们 就 能 把 GET 请 求 改 为 其 他 的 请 求 。 我 们 会 在 任务 32 中 看 到 这 种 做 法 。 














O 期 望 服务 器 返回 的 JS 代 码 是 callback (json) ， 其 中 callback 是 客户 端 设 置 并 告诉 服务 器 端的 回调 函数 名 ， 
json 是 服务 器 端 整 合 的 数据 。 本 例 给 出 的 服务 器 端的 这 段 PHP 代 码 说 得 很 清楚 : echo "$cb($response);";。* 
O 意思 就 是 要 预 解析 JS 代码 ， 还 得 用 跨 域 Ajax 来 获取 这 个 JS 代码 (如 果 第 三 方 资源 是 跨 域 的 话 )， 所 以 比较 麻烦 。* 








任务 30 使 用 JSON-P <@ 69 


通过 极 简 单 的 代码 实现 JSON-P 
最 简单 的 实现 大 致 是 这 样 的 : 
server/jsonp/jsonp.js 
document .documentElement.firstChild.appendChild( 


new Element ('script', { type: 'text/javascript', 
src: this.href + '&r=' + Math.random() })); 





上 面 的 代码 在 一 个 链接 单 击 事件 处 理 器 的 上 下 文中 执行 ， 因 此 this 引 用 的 是 被 单 击 的 那个 
<a> 元 素 。 

这 里 使 用 的 随机 参数 是 为 了 避免 浏览 器 缓存 而 添加 的 "。 为 了 保证 代码 的 质量 ， 最 好 先 检 查 
一 下 URI， 以 决定 是 用 & 还 是 ?作为 前 级 ”。 

一 种 更 高 级 的 方式 是 为 这 种 脚本 提供 动态 的 id= 属性 ”， 然 后 在 浏览 器 载 入 之 后 将 其 删除 ， 
以 免 DOM 变 得 过 大 。 这 个 动态 的 id= 属性 可 以 兼作 随机 参数 。 





server/jsonp/jsonp.js 


var script = new Element('script', { type: 'text/javascript', 
src: this.href }); 

script.src += ('&r=' + script.identify()); 

script.observe('load', Element.remove.curry (script) ); 

document .documentElement.firstChild.appendChild(script) ; 


使 用 框架 中 的 JSON-P 机 制 
有 几 个 框架 为 JSON-P 提 供 了 专门 的 函数 ， 这 迟早 会 派 得 上 用 场 。 


// jQuery 
S.getJSON(url[, data][, callback] ) 
// Mootools 


new Request.JSONP({ url: ..., onComplete: function(data) {...} }) 
// Dojo 
dojo.io.script.get({ url: ..., jsonp: function(data) {...} }) 


相关 任务 


口 任务 29 
O 任务 32 














O 浏览 器 会 缓存 一 个 url 的 响应 数据 ， 如 果 url 完 全 相同 ， 下 一 次 JSON-P 就 会 自动 用 之 前 的 数据 而 不 是 真 的 做 新 的 
请 求 。* 

@ 根据 这 个 参数 是 否 是 第 一 个 参数 。* 

© 即 Prototype 的 Element . identify (), 如 果 Element 当 前 没有 id, 调用 idqentify() 会 为 之 自动 生成 一 个 , É 
如 anonymous_element_x，x 从 1 开始 递增 。* 
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任务 31 


跨 域 “Ajax” (方法 收集 1) 


与 第 三 方 服务 做 数据 交互 的 情况 越 来 越 多 。 在 现在 这 个 混搭 流行 的 时 代 , 我 们 的 网 页 经 常 需 
要 与 服务 和 内 容 提供 者 进行 通信 ， 在 这 个 过 程 中 ， 我 们 当然 希望 不 要 加 重 服务 器 的 负担 。 

有 不 少 跨 域 后 台 载 和 数据 的 办 法 。 我 会 给 出 几 个 比较 重要 且 可 靠 的 方法 ， 它 们 应 该 足够 对 付 

我 先 简要 地 说 一 下 总 体 情 况 。 


O 任何 URL 都 能 用 所 谓 的 服务 器 端 代理 











来 载 入 数据 。 如 果 它 对 你 有 用 的 话 ， 那 就 用 它 吧 。 


不 过 在 处 理 文件 上 传 、 内 容 类 型 (contenttypes) 以 及 POST 请 求 这 类 东西 的 时 候 ， 可 能 需 
要 做 一 些 调整 (不 过 一 定 要 检查 并 过 滤 到 来 的 请 求 , 你 不 会 希望 自己 的 服务 器 莫名其妙 地 
为 垃圾 数据 传输 打开 方便 之 门 吧 )。 
n 未 来 进行 这 种 操作 的 方式 将 是 跨 来 源 资源 共享 (Cross-Origin Resource Sharing, CORS) °, 
XHR2 就 是 用 的 CORS"， 这 也 是 W3C 指 定 的 跨 域 数据 请 求 的 方式 。 然 而 ， 目 前 只 有 Firefox 
3.5+, Safari 4+ 和 Chrome 支 持 它 。 尽 管 IE8 实 现 了 CORS 的 基本 功能 (只 有 GET， 不 支持 自 
定义 头 部 , 不 支持 证 书 等 ), 不 过 它 需 要 你 使 用 一 个 名 为 YDomainRequest 的 自 定义 对 象 。 





O 如 果 上 面 两 个 办 法 都 不 可 用 ， 那 么 你 就 只 能 使 用 JSON-P， 或 者 同时 使 用 动态 /隐藏 表单 和 
<iframe>f, ° 


O 目前 ， 还 没有 特别 好 的 办 法 能 在 不 用 服务 器 端 代理 的 情况 下 ， 就 把 复杂 数据 POST 到 另外 


的 域名 。 尽 管 存在 一 些 应 对 手段 (参见 下 一 个 任务 )， 但 没有 一 个 能 够 解决 全 部 问题 。 
右 页 中 是 这 个 任务 的 代码 , 其 中 给 出 了 基于 CORS 的 方法 (无 需 额外 代码 ， 只 用 到 XMLHttp- 
Request)、 基 于 服务 器 端 代理 的 方法 以 及 两 个 基于 表单 的 动态 方法 ,其 中 的 一 个 方法 用 到 了 <iframe> 
( 另 一 个 方法 会 返回 204 响 应 码 , 使 得 浏览 器 不 会 尝试 跳 转 ,所 以 我 们 可 以 不 用 隐藏 的 <iframe>)。 
我 必须 强调 ， 只 有 当 你 不 想 依赖 于 某 个 外 部 服务 时 ， 才 有 必要 动用 表单 和 <iframe>， 否则 
你 就 应 该 选择 YQL (这 在 下 一 个 任务 中 讨论 )。 

















O 将 要 请 求 数据 的 URL 发 给 自己 的 服务 器 端 ， 由 自己 的 服务 器 端 获 取 这 个 URL 的 数据 之 后 再 返回 (比如 用 PHP 的 


readfile(Suri);), * 



































@ 意思 是 实现 了 CORS 的 新 版 浏览 器 本 身 就 能 做 跨 域 的 Ajax 请 求 。* 
© 关于 CORS 和 XHR2 的 更 多 信息 ， 请 访问 https://developer.mozilla.org/en/HTTP access_control。 


© 隐藏 表征 





和 + <iframe> 一 般 用 于 数据 提交 (还 是 得 放 在 url 的 参数 里 >_ <)， 如 果 要 下 








返回 的 数据 传 给 父 页 面 会 遇 








到 iframe 的 权限 问题 ， 因 为 fame 除 了 src 属 性 可 写 之 外 也 是 不 能 跨 域 。 当 然 也 不 排除 有 一 种 极端 的 手段 :在 前 面 
设置 的 这 ame A 里 再 垦 套 一 个 和 A 的 父 页 面 同 域名 的 fame B， 把 得 到 的 返回 数据 放 在 B 的 src 
或 者 标签 (Ham) 中 ， 这 样 就 可 以 由 B 把 这 些 数据 传 给 A 的 父 页 面 了 。* 


© 指 YQIL 有 






























































有 务 。 如 果 通 过 YQL 跨 域 的 话 系 统 的 正常 运行 就 依赖 于 YQL 的 正常 运行 。* 





属性 的 参数 (? 后 面 ) 


任务 31 SER “Ajax” (方法 收集 1) < 71 


使 用 CORS 兼 容 的 XMLHttpRequest 


server/crossdomain1/crossdomain1.js 


new Ajax.Updater({ success: ‘'responses' }, this.href, { 
method: ‘'get', insertion: 'bottom' 
} 


使 用 服务 器 端 协议 
server/crossdomain1/crossdomain1.js 


new Ajax.Updater({ success: 'responses' }, 'ssp.php', { 
method: 'get', parameters: { uri: this.href }, insertion: '‘bottom' 
Fs 


同时 使 用 动态 生成 的 表单 和 <iframe> 


server/crossdomain1/crossdomain1.js 


var warp = new Element ('iframe', { name: '__blackhole' }); 

warp.setStyle('width: 0; height: 0; border: 0'); 

document .body.appendChild(warp) ; 

warp.observe('load', function() { 
S('responses').insert('<p>OK, posted.</p>'); 

Fi 

var form = new Element('form', { method: 'post', action: this.href, 
target: '_ blackhole' }); 

form.submit (); 


使 用 得 到 204 了 响应 的 动态 生成 的 表单 
server/crossdomain1/crossdomain1.js 


var form = new Element('form', { method: 'post', action: this.href }); 
form.submit (); 
Element.insert.defer('responses', '<p>OK, posted.</p>'); 


相关 任务 


口 任务 32 
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任务 32 跨 域 “Ajax”( 方 法 收集 2) 


除了 前 一 个 任务 中 的 方法 , 还 有 儿 种 后 台 访 问 其 他 域名 的 远程 内 容 的 办 法 。 初 学 者 可 以 用 可 
靠 的 SON-P。 有 一 种 JSON-P 的 有 趣 用 法 可 用 来 访问 大 量 的 服务 、API 和 内 容 , 这 就 是 Yahoo! 提 供 
的 YQL 服 务 。YQL 人 允许 你 读 (有 了 时 还 可 以 写 ) 一 些 数据 表 ， 它们 可 以 映射 到 你 能 想象 的 所 有 可 能 
的 资源 : 著名 的 网 站 和 各 种 服务 (包括 搜索 、 地 图 、 地 理 定位 、 社 交 网 络 、Flickr、 音 乐 库 、 天 
A. feed’, MRN 等)。 要 是 你 还 没 玩 过 这 些 的 话 ， 现 在 赶紧 去 看 看 吧 。” 

YQL 提 供 两 个 巨大 的 “数据 库 表 ”， 分 别 叫 做 html 和 htmlpost (后 者 是 由 Chris Heilmann 提 供 的 
社区 维护 的 表 ,， 因此 它 完 胜 前 者 ) ， 可 以 任意 访问 资源 ， 然 后 得 到 其 原始 HTML 响应 。 它 们 允许 你 
把 数据 GET 或 者 POST 到 一 个 返回 HTML 的 资源 ， 甚 至 还 可 以 通过 XPath 选择 器 把 内 容 提取 出 来 。 

此 外 ， 还 有 另 一 种 非常 好 的 办 法 一 一 CSSHttpRecuest。 不 过 ， 它 需要 服务 器 端的 配合 。 这 
得 靠 data: 可 以 先 把 内 容 放 在 URI Scheme 里 ， 然 后 再 放 在 特定 名 称 的 CSS 规 则 中 。 因 为 CSS 文 
件 不 受 同 源 策 略 的 限制 ， 所 以 这 能 管用 。 有 个 很 小 的 开源 库 提 供 了 cSSHEtpRequest 这 个 
JavaScript 对 象 ， 以 及 Ruby、Python 和 PHP 的 服务 器 端 代 码 (很 容易 移植 到 其 他 语言 中 )“。 你 可 
以 通过 网 络 获取 更 多 细节 ”。 

你 可 以 用 本 书 代码 库 中 这 个 任务 的 示例 代码 来 试 坛 上 面 提 到 的 所 有 远程 访问 的 办 法 。 

另外 , 再 概述 一 下 两 种 我 有 意 没 放 在 前 面 的 办 法 , 这 样 你 就 不 会 说 我 忘 了 它们 。 第 一 个 方法 
是 使 用 Flash 桥 。 虽 然 这 种 方法 需要 服务 器 端 提供 某 种 形式 的 CORS 信 息 ， 但 有 一 个 称 为 TXHR 的 
库 , 使 得 这 个 操作 变 得 相当 容易 。 不 过 ,Flash 正 巧 是 我 不 怎么 喜欢 的 私有 技术 , 就算 不 考虑 这 一 
点 ， 仅 仅 为 跨 域 远程 访问 就 载 人 Flash 也 可 以 说 是 “ 杀 鸡 用 牛刀 ”了 。 

最 后 ， 你 也 可 以 利用 一 个 “Web 的 bug”， 即 利用 普通 的 <img> 标 签 (把 你 的 脚本 代码 放 在 里 
面 ) 在 动态 选中 的 图 片上 进行 服务 器 端 调用 。 不 过 问题 在 于 ,你 只 能 基于 图 片 的 长 和 宽 这 两 个 数 
来 传递 响应 信息 , 而 且 要 在 图 片 载 入 之 后 检测 出 原来 的 图 片 大 小 是 相当 麻烦 的 。 考 虑 到 其 响应 数 
据 如 此 有 限 ， 还 得 要 克服 那么 多 的 困难 ， 我 就 不 用 这 个 办 法 了 。 



























































© 网 站 提供 更 新 信息 的 接口 ， 常 见 的 feed 格 式 有 RSS、Atom 两 种 。 详 见 wiki: http://zh.wikipedia.org/wiki/ 消 息 来 源 。 

中 文 译名 有 消息 源 、 订 阅 源 、 网 源 等 。 本 译文 保留 原单 词 。* 

© 一 种 对 Web 数 据 添加 人 机 可 读 的 语义 标记 的 开放 方法 。 详 见 wiki: http://zh.wikipedia.org/wiki/ 微 格式 。* 

© Z Whttp://developer.yahoo.com/yql/, 

@ XML 路 径 语言 (XML Path Language) ， 用 “/A/B/C” 这 种 写法 来 定位 XML 文档 结 点 。* 

© URI Scheme 是 指 URI 的 格式 ， 写 法 是 <scheme name> : <hierarchical part> [ ? <query> ] [ # <fragment> ]， 比 如 在 
http://163.com/ 这 个 URI 中 ，http 属 于 <scheme name>, //163.com/ 属于 < hierarchical part >, * 

© 客户 端 只 需 调用 cssHttpRequest .get (url1，callback) ， 服 务 器 端 返 回 广 6 中 那样 的 CSS 编 码 ， 之 后 <aata> 会 传 
给 callback 这 个 国 数 。*# 

@ 参见 http://nb.io/hacks/csshttprequest。 



































任务 32 IPA, “Ajax” (方法 收集 2) 二 73 


使 用 之 前 那 种 普通 的 JSON-P 


window.jsonpCallback = function jsonpCallback(data) { 
S('responses') .update(data.payload.escapeHTML () ) ; 
}; 
document .documentElement.firstChild.appendchild( 
new Element ('script', { type: 'text/javascript', 
src: this.href + '?r=' + Math.random() + '&callback=jsonpCallback' })); 


使 用 JSON-P-X" 形 式 的 YQL html 表 


function yqlCallback(data) { 
// aata.results 是 匹配 元 素 HTML 片段 的 数组 
Mi 


var url = "http://github.com/languages/Ruby/updated", 
xpath = "//*[@class='title']", 
yql = ‘select * from html where url="'+url+'" and xpath="'+xpath+'"', 


data = { g: yal; format: ‘'xml', callback: 'yqlCallback' }; 
document .documentElement.firstChild.appendchild( 
new Element ('script', { type: 'text/javascript', 
src: '‘http://query.yahooapis.com/vi/public/yql?' + 
Object .toQueryString(data) + '&r=' + Math.random() })); 


使 用 JSON-P 形 式 的 YQL htmlpost# 


function yqlCallback(data) { 


// data.query.results.postresult.p == 匹配 元 素 内 容 的 数组 
Mi 
var yql = 'use "http://datatables.org/data/htmlpost.xml" as htmlpost; \ 


select * from htmlpost\ 

where url="http://demos.pocketjavascript.com/server/jsonp/postdemo. php" \ 
and postdata="foo=foo&bar=bar" and xpath="//p"', 

data = { q: yql, format: 'json', callback: 'yqlCallback' }; 

document .documentElement.firstChild.appendchild ( 
new Element ('script', { type: 'text/javascript', 

sre: 'http://query.yahooapis.com/vl1/public/yql?' + 

Object .toQueryString(data) + '&r=' + Math.random() })); 


使 用 CSSHttpRequest 


CSSHttpRequest.get(this.href, function(res) { 
S('responses').insert('<p>' + res.escapeHTML() + '</p>'); 
bi 


相关 任务 


O 任务 30 
口 任务 31 








® XML 格式 的 JSON-P。* 





本 书 的 最 后 一 部 分 包含 几 个 具体 例子 ， 它 们 讲 的 是 怎么 制作 放 在 你 自己 的 域名 里 并 且 连 接 

第 三 方 服务 的 网 页 。 这 里 没有 用 到 任何 自 定义 服务 器 端 协议 或 者 XML， 只 用 到 了 JSON-P 和 

YQL， 所 以 这 些 代码 自己 就 能 运行 ， 并 且 可 以 在 任何 地 方 单独 使 用 |! 

然而 ， 受 篇 幅 所 限 ， 本 书 的 代码 页 只 包含 代码 的 关键 部 分 ， 而 且 部 分 代码 可 能 需要 一 定 的 
封装 调整 。 因 此 务必 要 查阅 源码 包 ? 或 者 在 线 demo 网 页 ”， 以 理解 代码 的 运行 机 制 。 

上 把 Twitter feed 同步 到 网 页 上 是 如 今 经 常 要 用 到 的 功能 。 最 好 在 客户 端 实现 这 个 功能 ， 否 

则 会 给 服务 器 端 带 来 沉重 的 缓存 压力 。 任 务 33 将 为 你 解释 这 一 点 。 

O 把 你 最 新 在 Flickr 上 传 的 照片 同步 到 某 处 的 一 块 页 面 同样 常会 用 到 ， 这 在 任务 34 中 作 
解释 。 

o 第 三 个 任务 ， 任 务 35， 探 讨 了 网 络 中 越 来 越 重 要 的 一 个 方面 : 地 理 编码 (不 要 和 地 理 定 
位 相 混淆， 尽管 它 也 是 一 个 重要 的 新 趋势 ， 但 它 只 能 在 最 新 的 前 沿 浏览 器 中 用 )。 本 质 上 
来 说 ， 地 理 编码 把 照片 的 位 置 各 和 地 址 变 成 了 实际 的 地 理 坐 标 ， 使 得 你 能 把 这 些 位 置 名 
和 地 址 “ 钉 ” 在 地 图 上 ,并 和 其 他 数据 建立 起 关系 (比如 来 自 Flickr 或 者 tweets 的 照片 )， 
还 可 以 创造 出 把 多 种 数据 集 绑 定 在 一 起 的 各 种 有 用 的 混搭 。 如 今 网 络 和 其 中 的 数据 比 以 
往 任何 时 候 都 更 容易 获取 ， 因 此 我 们 可 以 利用 它们 写 出 无 穷 无 尽 的 应 用 ! 




















© 参见 http://pragprog.com/titles/pg_js. 
© 参见 http://demos.pocketjavascript.com/, 


76 > 第 六 部 分 使 用 混搭 


任务 33 Twitter 的 同步 更 新 


获取 你 最 近 的 tweet 可 以 说 是 轻而易举 ， 就 和 使 用 大 多 数 Twitter 的 API 一 样 简单 。 实 际 上 ， 这 
只 是 简单 的 JSON-P 调 用 罢了 。 


这 里 不 去 获取 retweet”、mention" 这 些 内 容 。 因 为 一 般 说 来 , 大 多 数 的 Twitter 同步 发 生 在 商业 
环境 下 ， 而 这 种 情况 下 ， 你 的 Twitter 账 户 是 被 用 作 一 种 额外 的 营销 渠道 ， 所 以 在 自己 的 信息 旁边 
显示 retweet、reply 或 mention 这 些 信 息 的 意义 就 不 大 了 。 此 外 ，Twitter API 并 没有 提供 一 种 直接 
在 取得 tweet 同 时 一 并 获取 retweet 的 办 法 ， 因 为 ， 这 样 一 来 ， 你 得 做 两 次 调用 ， 其 中 一 次 需要 用 户 
认证 ， 这 就 意味 着 你 的 访问 者 的 浏览 器 对 应 的 客户 端 能 够 获得 你 自己 账户 的 认证 。 我 们 当然 不 
RUSE RARE (还 有 一 个 选择 是 在 服务 器 端 做 同步 ， 不 过 这 就 超出 本 书 讨论 的 范围 了 ) 。 


在 右 页 的 代码 中 ,实际 获取 数据 的 代码 位 于 loadTwitterStream()， 只 占 短 短 几 行 。Twitter 
允许 你 通过 URL 读 取 任 何 用 户 的 tweet*， 我 们 这 里 只 对 JSON 格 式 的 信息 感 兴趣 。 


你 取 回 的 是 tweet 对 象 的 数组 ， 每 个 对 象 都 有 丰富 的 属性 ， 比 如 createq_at 、geo、 


® 














in_reply_to_status_id, sourceflltext, 





右 页 中 的 twittercallback() 函数 曾 明 了 如 何 做 简单 的 tweet 格 式 调整 . 给 reply、mention 和 
URL 全 部 赋予 超 链接 。 这 个 任务 的 在 线 示例 版 本 的 代码 是 一 个 略 有 改动 的 版 本 ， 它 还 可 以 处 理 
hashtag 和 mention， 并 显示 作者 信息 (头像 、 姓 名 、tweet 总 数 统计 等 )。 


在 用 Twitter 的 API 做 更 多 工作 之 前 ， 你 有 必要 浏览 一 遍 Twitter API 文 档 *。 另 外 ， 要 注意 部 分 
API 上 带 有 一 定 的 访问 频率 限制 ， 以 避免 你 的 过 度 使 用 超出 了 Twitter 的 系统 负荷 。 














O 在 twitter 中 对 别人 消息 的 转发 ， 用 RT 或 者 Retweet 标 签 标 识 ， 也 称 回 推 、 锐 推 、 转 推 。* 

© 在 twitter 消 息 中 ， 用 @ 符 号 后 跟 茶 个 用 户 名 (也 就 是 提 到 那个 用 户 )， 使 得 那个 用 户 能 在 其 reply 监 控 页 面 中 直接 看 
到 此 消息 。* 

© 对 别人 消息 的 回复 ， 公 开 回复 也 是 用 @ 符 号 ， 私 下 回复 就 是 发 送 站 内 消息 。* 

© 参见 http://twitter.com/statuses/user timeline/username.format。 

© 详 见 http:/apiwiki.twitter com/Return-Values。 

© twitter 的 # 标 签 ， 用 于 给 消息 指定 一 种 类 别 ， 使 得 同一 类 别 的 消息 能 够 聚 在 一 起 查看 。* 

© 参见 http://apiwiki.twitter.com/。 























任务 33 Twitter 的 同步 更 新 二 77 


获取 最 新 的 tweet 


下 面 的 代码 用 到 了 几 个 Prototype 的 国 数 ($() 、each() 、escapeHTML () insert () 等 )， 不 
过 比较 容易 转换 到 其 他 框架 下 。 


mashups/twitter/twitter.js 


var REGEXP_URL = new RegExp('(https?://.*?) (\\W?(?:\\s/S))', 'gi'); 


function twitterCallback(data) { 
var stream = $('twitterStream'), replyTo, contents; 
data.each(function(tweet) { 


contents = tweet.text.escapeHTML() .replace (REGEXP_URL, 


'<a href="S1">S1</a>S2'); 


if (replyTo = tweet.in_reply_to_screen_name) { // Intentional assign 
contents = contents.replace('@' + replyTo, 
'<a href="http://twitter.com/' + replyTo + '/statuses/' + 
tweet.in_reply_to_status_id + '">S&</a>'); 








} 
contents = '<li><p>' + contents + '</p>' + 

‘<p class="stamp">' + tweet.created_at + '</p></li>'; 
stream.insert (contents) ; 


by 


function loadTwitterStream(userName) { 


var uri = ‘http://twitter.com/statuses/user_timeline/'+userName+'.json'; 
document .documentElement.firstChild.appendchild( 


new Element ('script', { type: 'text/javascript', 
sre: uri + '?callback=twitterCallback&r=' + Math.random() })); 


看 看 tweet JSON 编 码 的 一 部 分 
(实际 返回 的 数据 要 详细 得 多 ， 而 且 显然 URL 不 会 缩写 ， 这 里 只 是 给 出 了 大 致 的 情形 罢了 。) 


{ 





"in_reply_to_screen_name": null, 





"user": { 
"friends_count": 27, "statuses_count": 622, 
"name": "ChristophePorteneuve", 
"followers_count": 215, 
"profile_image_url": "http://a3.twimg.com/.../headshot_tdd_normal.jpg", 


} 

"id": 9537162839, "created_at": "Tue Feb 23 18:35:22 +0000 2010", 
"in_reply_to_status_id": null, 

"text": "15' pour 850m. Sympa av Saint-Ouen + av Clichy aux heures de..." 





78 RABY 使 用 混搭 


任务 34 Flickr 的 同步 更 新 


尽管 Flickr 提 供 了 相当 多 的 与 REST 兼 容 的 API, 不 过 它 有 用 的 那些 API 大 多 需要 用 户 认 证 。 这 
比较 麻烦 ， 至 少 不 是 很 适合 要 公开 同步 的 内 容 。 


可 以 用 YQL 来 完成 大 部 分 有 用 的 查询 功能 ， 而 不 需要 认证 。 但 是 在 本 任务 的 特殊 情况 下 , 我 
们 用 Atom feed 的 JSON 数 据 变 体 " 来 做 也 是 可 行 的 ， 这 是 Flickr 给 大 部 分 页 面 (包括 Flickr 自 己 的 用 
户 页 面 ) 提供 的 API。 得 到 的 结果 数据 集 包含 我 们 需要 的 所 有 信息 ， 包 括 预 置 图 片 和 图 片 描述 的 
URL、 图 片 长 宽 和 发 布 日 期 。 虽 然 这 个 feed 仅 限 于 提供 最 近 的 二 十 个 图 片 更 新 ， 但 它 恰 好 就 适合 
我 们 这 里 的 “Flickr 更 新 ”同步 。 


右 页 的 JSON 片 段 就 是 我 们 会 得 到 的 那 种 feed 响应 数据 。 在 这 里 我 们 只 对 照片 缩 略 图 的 URL 
和 照片 发 布 日 期 最 感 兴趣 。 再 多 做 一 些 工作 的 话 ,还 可 以 得 到 照片 的 原始 长 宽 以 及 拍照 日 期 。 不 
过 为 了 简单 起 见 ， 我 们 还 是 只 单独 请 求 一 次 ， 不 做 太 多 调整 。 

这 里 我 们 得 到 的 图 像 URL, 它 指向 的 目标 是 照片 的 中 等 大 小 版 本 。 如 果 要 用 更 小 的 正方 形 缩 
上 略图， 把 图 像 URL 的 后 缀 从 _m 改 为 _s 即 可 。 

右 页 的 代码 还 很 好 地 曾 明 了 Prototype 的 Template 类 的 用 法 ， 这 允许 我 们 以 一 种 可 复 用 的 方 
式 高 效 地 计算 出 “格式 化 的 字符 串 ”。 

还 是 那 句 话 ， 用 YQL 给 Flickr 提 供 的 表 可 以 在 未 认证 的 情况 下 得 到 更 多 信息 ( 先 请 求 一 次 得 
到 简略 的 初始 响应 结果 ， 再 分 别 查询 每 个 照片 以 获得 更 多 详细 资料 )。 不 过 ， 如 果 你 需要 进一步 
获取 更 详细 的 信息 ， 或 者 干脆 要 更 新 数据 的 话 ， 还 是 使 用 经 过 用 户 认 证 的 Flickr APIE, 





















































O 指 对 Atom feed 的 JSON 做 过 一 些 调整 的 JSON 数 据 。* 


任务 34 Flickr 的 同步 更 新 号 79 


获取 某 人 公开 的 照片 
mashups/flickr/flickr.js 


var FLICKR_ENDPOINT='http://api.flickr.com/services/feeds/photos_public.gne'; 
var FLICKR_USER_ID ='97027332@N00'; // 这 是 作者 的 ID 
var item = new Template( 

'<li><a href="#{target}"><img src="#{src}" title="#{title}" /></a></li>'); 


function jsonFlickrFeed(data) { 
var stream = $('flickrStream'), d, dateStr; 
data.items.each(function(photo) { 
d = photo.published.split(/\D/); 
dateStr = d[1] + '/' + d[2] + '/' + d[0]; 
stream. insert (item.evaluate({ 
src: photo.media.m.replace('_m', '_s'), target: photo.link, 
title: ‘Published on ' + dateStr + ' GMT' 
beds 


}) 3 
$('indicator') .removeClassName('loading') .update('Loaded!'); 


function loadFlickrPhotostream() { 
var uri = FLICKR_ENDPOINT + '?format=json&id=' + FLICKR_USER_ID; 
document .documentElement.firstChild.appendchild( 
new Element ('script', { type: 'text/javascript', 
src: uri + '&r=' + Math.random() })); 


JSON-P 响 应 的 部 分 内 容 


jsonFlickrFeed (1{ 
// 
"items": [ 
{ 
"title": "P1010071", 
"link": "http://www. flickr.com/photos/97027332@N00/4105961623/", 
"media": { 
"ms "*http:// farms.stetic. flickr. com/2630/4105961623 _ecl0ca9clb4_m.jpg" 
} 
"date_taken": "2009-11-12T15:38:21-08:00", 
// 
"ogublished": "2009-11-15T18:54:212", 
// 
} 
// 
] 
} 


80 > 第 六 部 分 使 用 混搭 


任务 35 ”获得 地 理 位 置 及 该 位 置 的 照片 


主要 由 于 移动 互联 网 的 兴起 , 地 理 定位 现在 成 了 比较 普遍 的 需求 ,因此 让 我 们 来 看 看 它 的 两 
个 主要 方面 。 

D 第 一 , 将 文本 位 置 《地 址 、 城 市 、 行 政 区 或 者 州 、 国 家 ) 转换 成 地 理 位 置 (实质 上 就 是 经 
25E) °; 
D 第 二 ， 用 这 些 地 理 坐 标 来 搜索 数据 。 

有 不 少 API 可 以 选用 ， 包 括 Google、Yahoo!、Geonames 还 有 一 些 其 他 人 开发 的 著名 的 “地 理 
编码 器 ”。 根 据 我 们 的 需要 ,我 就 用 一 个 简单 直接 且 实 用 的 工具 : Yahoo! 的 Placemaker API， 再 加 
上 Christian Heilmann 为 它 打 造 的 JavaScript wrapper”， 即 JS-Placemake。 这 个 API 人 允许 我 们 分 析 任 
何 文 本 ,并 提取 该 文本 可 能 对 应 的 一 个 或 多 个 地 理 位 置 。 我 们 就 用 它 来 把 位 置 名 称 ( 比 如 在 某 个 
表单 域 中 输入 的 文本 ) 转换 成 经 纬度 坐标 。 

和 所 有 其 他 Yahoo! 开 发 者 网 络 (Yahoo! Developer Network) 的 API 一 样 ,Placemaker 需 要 Yahoo! 
AppID。 右 页 的 示例 代码 中 有 个 能 用 的 AppID， 不 过 你 最 好 自己 申请 一 个 来 玩 。 接着 ， 你 要 做 的 
就 是 把 这 个 AppID 告 诉 那个 JavaScript wrapper， 之 后 调用 它 的 getPlaces () 国 数 ， 提 供 竺 分 析 的 
文本 、 回 调 函 数 (用 来 处 理 结果 ) 和 可 选 的 大 体位 置 (例如 en-US 或 者 fr-FR, 用 来 帮助 Placemaker 
做 正确 的 分 析 ) 作为 这 个 函数 的 参数 。 


注意 到 代码 里 用 来 把 结果 确定 地 “正规 化 ”为 位 置 数 组 的 小 技巧 。 由 于 存在 单个 匹配 时 只 返 
回 一 个 单独 的 match 属 性 ， 而 存在 多 个 匹配 时 则 会 返回 名 为 matches 的 一 个 数组 ， 我 们 采用 
(matches || [match]) 这 个 构造 来 把 这 两 种 情况 的 返回 值 统 一 转换 成 数组 来 访问 。 
在 涉及 Flickr 这 边 , 我 们 只 是 通过 一 个 与 上 个 任务 中 类 似 的 JSON-P 调 用 , 用 地 理 相 关 参 数 1at 
和 1on 调 用 位 ckrphotos.search 方 法 。 由 于 我 们 是 做 全 局 搜索 ， 这 次 调用 无 需 指 定 用 户 ID。 

如 果 你 对 客户 端 上 的 和 基于 JavaScript 的 其 他 地 理 相 关 技 巧 感 兴趣 ， 比 如 GeoIP 以 及 W3C Geo 
API， 你 可 以 在 由 非凡 的 福音 传道 者 "Christian Heilmann 维 护 的 页 面 * 上 找到 丰富 的 信息 、demo 以 
及 另 一 些 很 酷 的 东西 。 












































© 有 时 你 也 会 想得到 额外 的 数据 ， 比 如 精确 度 和 结果 包围 区 域 。 

@ Wirapper 一 般 指 对 现 有 API 的 封装 ， 目 的 是 使 之 更 简洁 易 用 。* 

© 在 https://developer.apps.yahoo.com/wsregapp/ 这 里 申请 AppID 。 

@ 这 是 对 于 真心 崇拜 地 理 定位 的 人 来 说 的 ， 那 些 不 看 重地 理 定位 的 人 和 更 多 从 未 听 说 过 地 理 定位 的 人 不 会 这 么 想 。*# 
© 参见 http://isithackday.com/hacks/geo/。 
































任务 35 ”获得 地 理 位 置 及 该 位 置 的 照片 号 81 


获取 给 定 文本 的 地 理 位 置 
(以 下 代码 实际 上 假设 只 有 第 一 个 地 理 位 置 结果 有 用 ,) 
mashups/geo/geo.js 


// 在 你 自己 的 代码 中 用 你 自己 的 API 码 :-) 
var YAHOO_APPID = 'KwWEZW_V34GVYNWWOLZm6NT.' + 
'XfIwNrF9ysko8quésDuE6SbehuptUuZQp6jKF130V25hFTMrrdrbQeo4-'; 


function getGeoLocationFor(text) { 
Placemaker.config.appID = YAHOO_APPID; 
S('indicator') .addClassName('loading') .update('Getting geolocation for ' + 
text.escapeHTML() + '...').show(); 
Placemaker.getPlaces(text, function(places) { 
if (places.error) { 
S('indicator') .removeClassName('loading'). 
update (places.error.escapeHTML()); 
} else { 
var loc = (places.matches || [places.match] ) [0].place; 
S('indicator') .update('Loading ' + loc.name + 
' pics (' + loc.type + ')...'); 
getGeoPhotos(loc.centroid.latitude, loc.centroid.longitude) ; 
} 
}, ‘'en-US'); 


从 Flickr 获 取 指 定 地 理 位 置 的 照片 
mashups/geo/geo.js 


// flickrCcallback 非 常 类 似 于 Flickr 同 步 任务 的 代码 
// 在 http://pragprog.conytitles/pg-js/source_ code 这 个 网 址 上 获得 完整 的 示例 代码 


function getGeoPhotos(lat, lon) { 

$('indicator') .addClassName('loading').show(); 

var uri = FLICKR_ENDPOINT + '?' + Object.toQueryString({ 
method: '‘'flickr.photos.search', api_key: FLICKR_API_KEY, 
extras: 'date_taken,url_sq,description', lat: lat, lon: lon, 
per_page: 50, format: 'json', jsoncallback: 'flickrCallback' 

Es 

document .documentElement.firstChild.appendChild( 
new Element ('script', { type: 'text/javascript', 

src: uri + '&amp;r=' + Math.random() })); 
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内 置 类 型 和 字面 量 
Number 0, 52, 0.15, 3e10, -3.12e-2 
String "Hello", 'hello' ( 均 可 使 用 转 义 序列 )， 常 用 转 义 序列 ; \r \n \t \" AT \uxxxx (十 六 
进 制 ) \0ooo (八进制 ) 
Boolean true, false 
Array Me ike Ay Bly Wk, Ae yes 
Date new Date(...) (无 字面 表示 法 ) 
RegexExp /pattern/flags ( 详 见 下 文 ) 
Function function(...){...} ( 详 见 下 文 ) 
Object ul eu ole ENS a 











typeof 表达 式 一 类 型 名 称 , 小 写 


将 0、'' ( 空 字 符 串 )、null 和 undefined 转 换 为 布尔 类 型 时 会 得 到 false， 转换 其 他 值 均 会 
































得 到 true。 
正则 表达 式 回顾 
类 别 (匹配 字符 的 集合 ) . \d \D Ww \W \s \S [...] [^...] (必须 以 字面 连 字 号 结尾 ) 
边界 VA WS © SWS NE 
贪 禁 匹配 符 (最 大 匹配 ) * (0+) ? (0-1) + (1+) {min,} {,max} {min,max} 
懒惰 匹配 符 (最 小 匹配 ) eT ats 
分 组 (... ) 捕获 分 组 (可 作为 后 向 引用 )，(? : . . . ) 不 捕获 分 组 (速度 更 快 ) 
前 向 匹配 (2?=. ..) 要 求 字符 串 前 的 内 容 被 匹配 ，(?! . . . ) 需要 字符 串 前 的 内 容 不 被 匹配 
后 向 引用 \1...\9 (代表 组 的 序号 )，\& (整个 匹配 串 ) 
或 | (如 果 在 一 个 组 中 出 现 ， 则 仅 作 用 于 此 组 内 的 内 容 ) 
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标识 位 
g 全 局 匹配 : 匹配 所 有 的 目标 字符 串 ， 而 非 第 一 次 出 现 
at 大 小 写 敏 感 (对 Unicode 也 适用 ) 
m 多 行 匹 配 : 点 字符 (.) 可 匹配 任意 字符 ， 包 括 换行 符 

















O 多 次 编译 同一 个 正则 表达 式 会 造成 性 能 损耗 ， 尽 量 对 其 进行 预 编译 。 

O 如 果 只 想 检查 是 否 存在 匹配 而 不 关心 其 他 细节 (例如 组 ) 的 话 ， 使 用 regex.test (str) 
而 不 是 str.match (regex), 

O 如 果 不 需要 捕获 组 的 内 容 作 为 后 向 引用 , 而 仅仅 是 在 组 上 应 用 一 个 限定 符 , 请 把 这 个 组 标 
记 为 非 捕 获 型 ，(?:...)。 





口 声明 : function fxName(...) {...} 
口 表达 式 : function(...) {...} 





声明 被 “提升 ”到 它们 的 作用 域 中 : 作用 域 中 的 每 一 个 函数 都 可 以 调用 其 他 函数 ,而 不 受 它 
们 的 声明 顺序 影响 (这 里 并 不 需要 “原型 声明 ””) 。 
O "return x; " 退出 国 数 并 返回 x。 
O "return; " 退出 国 数 返回 unaefineq。 
函数 本 身 也 是 一 种 对 象 ， 所 以 函数 拥有 自己 的 方法 (比如 apply 和 call)， 也 可 以 按 引 用 被 
传递 (但 这 样 你 就 会 丢失 它们 的 绑 定 关系 : this 关 键 字 原 有 的 含义 )。 这 意味 着 你 可 以 对 函数 赋 
E, 或 者 将 函数 作为 参数 来 传递 。 

国 数 的 参数 列表 中 并 不 限定 参数 类 型 , 参数 名 起 到 的 更 多 是 提示 作用 。JavaScript 会 把 实 参 赋 
到 对 应 的 形 参 上 。 需 要 注意 的 是 ， 所 有 的 JavaScript 参 数 都 像 varargs" 一 样 : 你 可 以 传递 任意 数 
量 的 参数 ， 并 通过 内 置 的 参数 变量 表 ， 以 访问 数组 的 形式 访问 它们 。 












































特殊 值 

undefined 未 被 赋值 的 变量 ， 未 匹配 实 参 的 形 参 

null 没有 被 明确 的 定义 ; 一 般 是 DOM 调 用 “无 结果 ”的 返回 值 , 一般 在 程序 中 被 作为 “ 空 值 ” 赋 给 
某 个 变量 

false, true 两 个 布尔 值 字面 量 

Infinity 无 限 的 数值 (可 以 带 有 正 负 号 ， 比 如 -Infinity) 

NaN 非 数值 (Not-a-Number) 表达 式 的 返回 值 ， 比 如 说 失败 的 数值 解析 。 它 与 任何 数值 不 等 ， 包 括 
它 自己 ， 所 以 一 般 通 过 isNaN (n) 来 判断 变量 是 否 为 NaN 























O C/C++ 语言 中 在 使 用 一 个 函数 前 ， 必 须 对 其 进行 原型 声明 ， 否 则 无 法 使 用 。* 
© C 语 言 中 为 支持 可 变 参 数 而 采用 的 机 制 。* 
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操作 符 
算术 操作 符 : + - * / % ++ -- 
注意 : JavaScript 中 没有 int 或 是 float 类 型 ， 只 有 Number 类 型 。 


Os = 求 模 / 取 余 。 人 负 号 (一 元 操作 符 ) 会 改变 数值 符号 ;， -42。 
a ++ 和 -- 分 别 为 自 增 和 自 减 。 优 先 使 用 前 置 符 (++x)， 除 韭 有 明确 的 原因 要 使 用 后 置 符 














(x++)。 

比较 操作 符 : L SS 

O == 仅 对 值 进 行 比较 ， 并 使 用 一 套 “ 转 换 协 议 ”， 所 以 会 有 5 == "5"、0 == false, null 
== undefined 等 。 

O === 进行 严格 的 比较 ， 既 对 值 作 比较 ， 也 对 类 型 作 比 较 。undefineq === x 非常 适合 严 
格 的 测试 。 





a != 不 等 号 (类 似 于 VB/SQL's 中 的 <>), 
布尔 逻辑 操作 符 : gg (逻辑 与 ) 11 (逻辑 或 ) 
注意 : 


O g& 比 11 的 优先 级 高 。 
口 如 果 a 为 真 ,a ll b 会 把 b 短 路 〈 即 不 去 求 值 )。 
O 如 果 a 为 假 ，a && b 会 把 b 短 路 。 


算术 操作 简写 符 : += -= *= /= %= 
a += b 等 价 于 a = a + b， 其 余 类 似 。 这 样 的 写法 更 简洁 。 
成 员 选择 符 : [...] 


O 数组 通过 下 标 来 选择 元 素 : array[5] (0 作为 起 始 下 标 )。 
D 动态 成 员 选 择 : 
Jaa 


E obj ['propName'] 等 从 
可 























于 obj.propName; 


E obj['methodName'](...) 等 价 于 obj.methodName(...); 


a 例如 node [visiple? 'show' : 'hide'](), 
优先 级 : 和 C/C++/Java/Ruby 中 的 操作 符 优先 级 类 似 。 
口 * / s 优先 级 高 于 + - 


附录 A JavaScript 快速 参考 <q 87 


D && 优先 级 高 于 |l 
O (...) 强制 改变 优先 级 
a (5 * 3) + (6 / 2) 等 价 于 5*3+6/2 





O (a && b) || (c && d) 等 价 于 a && b || c & A 

位 操作 符 (很 少 用 到 ): & | ^ << >> >>> 

^ 是 异 或 操作 符 ，<< 和 >> 为 右 移 位 和 左 移 位 操作 符 (>>> 为 无 符号 右 移 操作 符 )。 
变量 和 作用 域 

var x, y=42, z, t=y*2; 

局 部 变量 必须 通过 var 关 键 字 声明 。 

能 不 要 使 用 全 局 变量 。 


变量 可 以 在 声明 时 被 赋值 。 它 们 可 以 在 其 被 声明 的 区 域内 被 访问 (大 多 数 情 况 下 是 当前 函 
数 体 )。 


如 果 你 的 代码 需要 隐藏 一 些 标识 符 (变量 或 者 是 函数 )， 请 使 用 模块 模式 ”: 


(function() { 

// 这 里 的 内 容 不 会 被 外 界 所 访问 到 

// 除 非 你 返回 里 面 的 成 员 或 直接 对 里 面 的 成 员 赋值 
HO; 


Mey pers 
分 支 判断 语句 
if (condition) { switch (expr) { 
code case valued: 
} codeA 
break; 
if (condA) { case valBl: 
codeA case valB2: 
} else if (condB) { codeB 
codeB break; 
} else { default: 
codec codeC 


} } 
提示 : 尽早 返回 值 ,， 以免 陷 入 到 层 层 骨 套 的 else 代 码 块 中 , 同时 请 保持 代码 的 缩 进 正常 ， 以 
便 阅 读 。 





O 详 见 任务 2 (通过 模块 模式 实现 代码 访问 控制 )。* 
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应 该 了 解 的 数组 知识 


var arr=[2; 3, 4, 5, 6]; 





arr.length ff => 5 
arr.concat([7, 8, 9]) // => [2..9] 
arr // => [2..9] 
arr.push(10) ff => [2x00] 
arr.unshift (1) // => [1..20] 
arr.pop() // => 10 
arr.shift() E asl 
arr // => [2..9] 
arr.slice(4, -2) fi => [650-77 8] 
arr.join('') // => '23456789' 
arr.sort (function(a, b) { 

return b - a; 
A) yy => [9% Br Fe By Sy Sy 3, 2] 
arr.sort () Li o> Tay By 45-53: 65. Te Ba GI 
arr.splice(5) Tie TV 8 9 
arr ff o> [2; 35 4, Sy 6] 

异常 及 错误 处 理 

try{ 

可 能 发 生 异 常 的 代码 


} catch(e) { 

这 段 代码 只 在 异常 产生 时 执行 // e 引用 了 error 对 象 
} finally { 

无 论 是 否 有 异常 产生 ， 这 段 代 码 都 会 执行 
} 


你 可 以 通过 raise exceptionobject 来 抛 出 自 定义 的 异常 〈 可 以 是 任何 类 型 的 对 象 ) 。 


全 局 的 Math 对 象 中 包含 了 各 种 常用 的 操作 以 及 一 些 有 用 的 常量 ， 举 例如 下 。 


O 34436. E LN2 LN10 LOG21 


i 








eai 





LOG10E SQRT1_2 SQRT2 exp log pow sqrt 
Q 三 角 : PI acos asin atan atan2 cos sin tan 


O 取 整 及 其 他 : abs ceil floor max min random round 





异步 代码 : 使 用 timeout 


var timer; 
function callback() { 


timer && window.clearTimeout (timer) ; 
timer = null; 
回调 代码 ; 

} 

//0.1 秒 


window.setTimeout (callback, 100); 


可 怜 人 的 调试 器 ” 
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全 局 的 window 对 象 含 有 alert (...) 方 法 ,调用 它 可 以 弹出 一 个 对 话机 


[HI 


。 如 果 可 能 的 话 〈 使 





用 Safari、 装 有 Firebug 的 Firefox 以 及 Opera、IE8+) ， 使 用 控制 台 机 制 来 获得 更 轻松 的 调试 体验 。 





Firebug 的 console 对 象 在 console.1og 的 基础 上 增加 了 大 量 的 内 容 。 为 了 获得 更 多 信息 ,请 


登录 http://getfirebug.com/logging , 


循环 


for (decl; 
代码 


test; incr){ 
} 
do { 


至 少 会 执行 一 次 的 代码 
} while( 条 件 ) ; 


“快速 数组 循环 ” 


for(var i=0, 


代码 


非常 有 用 的 字符 串 操 作 


while(cond) { 
可 能 永远 不 会 执行 的 代码 
} 


while(true) { 
至 少 会 执行 一 次 的 代码 
if ( 跳 过 接 下 来 的 内 容 ) 
continue; 
Lf (停止 当前 循环 ) 
break; 


其 余 的 代码 


l=arr.length; i<l; ++i) 





这 里 并 没有 提 到 length 属 性 (返回 包含 的 字符 个 数 ， 而 非 字 市 的 个 数 )。 


'yay'.charAt (1) 


"hello'.indexOf('1') 
"hello'.indexOf('l', 3) 
"hello'.lastIndexOf('1') 
'hello'.lastIndexOf('1l', 2) 
‘hello'.replace('l', 'L') 
"hello'.replace(/[aeiouy]/g, '-') 
"hello'.replace(/(.)\1/g, 





// => ‘a’ 

ff ES 

// => 3 (指定 了 搜索 起 始 位 置 以 最 小 返回 值 ) 
ii =s 3 

// => 2 (指定 了 搜索 结束 位 置 以 最 大 返回 值 ) 
// => ‘heLlo' 

// => 'h-11-' 


function(s) { 


O 本 书 作者 认为 使 用 alert (... ) 进 行 JavaScript 调 试 过 于 原始 ， 阅 读 附录 B 以 获得 关于 JavaScript 调 试 的 更 多 细节 。* 
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return s.toUpperCase() ; 
}) // => 


ra b c'.split(' ') 

‘a b \nc'.eplit(/\s+/) 
‘abc'.split('') 

La: BlLit( 15. “25 
‘hello'.substring(2) 
‘hello'.substring(2, 4) 
"hello'.slice(-3) 
'‘hello'.slice(-3, -1) 
'BlodiE' .toLowerCase () 
'déja ca'.toUpperCase() 
"hello'.match(/(.)\1/) 


'heLLo' 
// => [ta', bts tem] 
// => [ta', 'b', tai) 
// => [ta', 'b', 'c'] 
// => ['a', ‘be'] (指定 了 最 多 分 割 为 多 少 个 ) 
ff => “Lio! 


// => '11' (指定 了 子 串 结束 位 置 ) 

// => '11o' (从 倒数 第 3 个 字符 开始 ) 

// => '11' (指定 了 结束 位 置 ， 到 倒数 第 2 个 字符 ) 
// => 'élodie' 

// => ‘DEJA ÇA' 

Ff CELLS SISI f 


下 标 0 处 为 完整 匹配 ， 下 标 1 处 为 组 1 捕获 的 内 容 ， 依 此 类 推 。 


一 些 全 局 的 好 东西 


var x = 4; 
eval('x * Math.sqrt(16)') 


// => 20 - 请 小 心 使 用 ! 


decodeURIComponent ('%C3%89lodie' ) // => 'Blodie' 


encodeURIComponent ('S & H') 
parseInt ('010') 

parseInt ('08') 

parseInt ('010', 10) 
parseFloat ('314.15e-2') 
isNaN (parseInt ('foobar') ) 
Math.PI.toFixed (3) 
(5.31762) .toFixed (3) 
ath.PI.toPrecision (3) 





标识 符 和 保留 字 


// => 'S%20%26%20H' 
{fi => 8 f 

// => NaN 十 

// => 10 TT 


// => 3.1415 
// => true 


// => 3.142 
ff => 5.378 
// => 3.14 


O 如 果 没 有 显 式 声明 基数 ，parseInt 会 自动 作出 判断 。 前 绥 为 0 代表 八进制 ， 因 此 …… 
O 如 果 显 式 声 明基 数 的 话 ， 就 不 会 出 现 混 乱 了 。 推 荐 使 用 这 ee 


标识 符 的 起 始 字符 必须 是 $S、_ 或 者 Unicode 字 符 〈 即 使 是 这 样 ， 你 仍 应 避免 在 标识 符 中 包含 
怪异 的 字符 ) ， 接 下 来 的 字符 可 以 是 任意 Unicode 字 符 。 


JavaScript 现 在 的 保留 字 不 超过 5 





6 个 ， 而 且 它 们 中 的 大 多 数 并 不 是 当前 版 本 JavaScript 中 真正 


abstract boolean break byte case catch char class const continue debugger default delete 
do double else enum export extends final finally float for function goto if implements import 
in instanceof int interface long native new package private protected public return short 
static super switch synchronized this throw throws transient try typeof var void volatile 


while with 
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B.1 此 处 危险 


就 在 几 年 前 ， 调 试 JavaScript 就 像 在 蹦床 上 一 边 跳 着 一 边 蒙 着 眼睛 使 用 硝化 甘油 "一 样 。 那 时 
候 ，JavaScript 的 开发 工具 极度 匮乏 , 而 仅 有 的 那 几 个 工具 既 不 好 用 也 不 实用 (不 过 平 心 而 论 ， 当 
时 Visual Web Developer Express 里 面 的 IE 调 试 工具 算是 相当 不 错 了 )。 


总 之 ， 在 那 时候 进 行 JavaScript 调 试 可 是 一 项 相当 危险 的 工作 。 出 于 Mozilla 多 年 使 用 捉 鬼 敢 
死 队 中 的 角色 进行 开发 代号 命名 的 传统 ，Mozilla 的 JavaScript 调 试 器 被 命名 为 Venkman, 而 它 的 底 
线 就 是 “ 别 死 了 都 不 知道 是 怎么 死 的 !1”“ 没 错 ，JavaScript 调 试 在 当时 就 是 这 样 险象 环 生 。 


随后 , Joe Hewitt 坟 入 JavaScript 界 ,推出 了 他 谦 称 为 “只 是 把 一 些 脚本 放 在 了 一 起 ”的 工具 ”。 
事实 上 , Firebug 在 Web 前 端 开发 这 块 被 遗弃 的 领域 上 树立 起 了 一 座 灯塔 , 拯救 无 数 JavaScript 开 发 
者 于 水 深 火 热 之 中 。 

Firebug 的 出 现 把 JavaScript 开 发 工具 推 到 了 全 新 的 高 度 ， 游 戏 规则 也 因此 发 生 了 巨大 的 变化 ， 
来 自 各 个 浏览 器 供应 商 的 优秀 开发 者 纷纷 开始 在 JavaScript 上 大 展 身手 ，Safari 的 Web Inspector 和 
Opera 的 Dragonfly 应 运 而 生 ， 甚 至 Internet Explorer 8 都 拥有 了 相当 不 错 的 JavaScript 调 试 器 。 不 过 ， 
Firebug 仍 然 在 JavaScript 调 试 器 中 保持 着 领先 的 地 位 (尽管 领先 优势 不 像 以 前 那么 明显 )， 而 它 也 
在 Web 开 发 者 心中 占据 了 一 个 特殊 的 位 置 。 


配置 一 个 调试 工作 台 


这 篇 附录 通 篇 使 用 了 一 个 带 有 一 些 JavaScript 脚 本 的 测试 页 面 ， 以 便 演示 不 同 浏 览 器 中 的 调试 机 
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该 页 面 的 源 代 码 debugbench.html 和 对 应 的 debugbench.js 文 件 可 以 在 本 书 的 在 线 代码 档案 中 找到 。 
下 面 是 这 个 HTML 页 面 的 源 代码 : 
debugbench.html 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtmli-strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="debugbench.js"></script> 
<title>Pocket JavaScript debug bench</title> 
</head> 
<body> 
<h1>Debug bench</h1> 
<input type="button" onclick="alert (fibo(20))" value="Fibo(20)" /> 
</body> 
</html> 


下 面 是 接 下 来 会 用 到 的 JavaScript 源 代码 : 


debugbench.js 


function fibo(base) { 
if (base <= 2) 
return 1; 
return fibo(base - 1) + fibo(base - 2); 


} 


B.2 Firefox#iFirebug 


可 以 在 Firebug 的 官方 主页 (http://getfirebug.com) 或 Mozilla 的 附件 库 页 面 (http://addons.mozilla.org) 


获得 Firebug。 在 写 这 本 书 的 时 候 , Firebug 已 经 发 布 了 1.4 版 本 "， 它 的 alpha 版 本 也 在 紧锣密鼓 的 测 
试 之 中 。Firebug 曾 经 有 过 一 段 比 较 艰 难 的 时 期 , 当时 它 的 一 些 Ajax 相 关 的 特性 会 导致 双重 请 求 之 
类 的 怪异 行为 。 不 过 经 过 开发 者 的 努力 ,在 Firebug 的 新 版 本 里 ,这些 问 题 已 不 复 存在 ,同时 它 的 
功能 也 变 得 更 加 强大 。 所 以 ， 如 果 你 还 在 使 用 Firebug 1.2 到 1.3 之 间 的 版 本 ， 那 么 我 建议 你 应 该 尽 
快 升级 到 最 新 版 本 。 











出 于 性 能 方面 的 考虑 ， 在 浏览 任何 地 址 (包括 本 地 文件 ) 时 ，Firebug 的 一 些 特性 默认 处 于 关 


闭 状态 。 这 时 ， 你 需要 单 击 状态 条 右边 的 bug 图 标 来 打开 Firebug 面 板 ， 并 激活 你 需要 的 特性 。 








区 主要 关注 Console (控制 台 ) 和 Script (脚本 ) 选项 卡 。 








O 翻译 本 书 时 Firebug 已 经 推出 了 1.7 版 本 。* 
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控制 台 既 是 一 个 即时 的 JavaScript 命 令 行 , 也 是 一 个 日 志 区 。 你 可 以 在 控制 台 里 利用 全 局 的 console 
对 象 和 内 置 的 方法 来 编写 脚本 (内 置 方 法 有 log () 、debug ()、error() 和 group() 等 。 如 需 了 解 
更 多 ， 请 到 Firebug 官 方 站 点 阅读 完整 的 consoleAPI )。 











BOO Pocket JavaScript debug bench = 
> { (tr) a Í file: // /Users/tdd /perso/livres /JSPocket/Book/code) Y7 Y Eea Google 】 
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一 一 一 
Fibo(20) ) 











me Rs 7 
图 B-1 Firebug 的 基本 Script 视图 

Script 选 项 卡 内 包含 实际 的 调试 器 。 它 允许 你 浏览 当前 页 面 中 所 有 的 脚本 (包括 加 载 的 文件 、 
内 联 事 件 属性 等 )、 设 置 断 点 、 单 步调 试 代码 、 监 视 指 定 的 表达 式 或 变量 (Watch 子 选项 卡 ) 以 及 
观察 当前 栈 轨 迹 (Stack 子 选项 卡 )。 这 正 是 我 们 在 运行 时 检查 JavaScript 代 码 所 必需 的 。 

图 B-1 展 示 了 在 我 们 的 测试 页 面 上 运行 脚本 调试 器 的 效果 。 

在 脚本 调试 器 中 运行 代码 主要 有 两 种 方法 : 进入 控制 台 , 执行 可 以 触发 待 检查 代码 段 的 代码 ， 
或 者 在 页 面 里 触发 待 检查 代码 所 对 应 的 事件 ” 。 在 我 们 的 调试 测试 页 面 中 ， 单 击 按钮 后 ，fibo () 
会 被 调用 (参数 是 20)。 你 可 以 自己 动手 确认 你 应 该 会 看 到 一 个 显示 (6,765) 的 弹 窗 。 为 了 
理解 函数 的 执行 细节 ， 你 还 可 以 在 调试 器 中 做 一 些 其 他 操作 。 
O 选择 一 个 脚本 文件 (或 者 是 带 有 内 联 脚 本 的 HTML 页 ): 单 击 源码 面板 上 面 的 文件 名 旁边 
的 箭头 ， 然 后 选择 你 需要 的 文件 。 
O 在 指定 代码 行 增 加 及 删除 断 点 : 单 击 源码 面板 指定 行 号 左边 的 沟 模 处 即 可 。 
O 设置 一 个 在 给 定 条 件 下 才 会 发 生 的 断 点 ， 右 击 沟 权 处 的 断 点 ， 然 后 输入 JavaScript 条 件 表 











® 详 见 http://getfirebug.com/wiki/index.php/Console_API。* 
@ 大 多 数 调试 器 都 会 在 未 捕获 异常 抛 出 时 自动 进入 单 步调 试 状态 。 在 Firebug 中 ， 
启动 这 个 功能 。 


iin 
[EK 


ru 








FScript 选 项 卡 上 的 箭头 就 可 以 
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O 禁用 一 个 断 点 〈 同 时 保留 它 的 位 置 和 条 件 ) : 在 Breakpoints 子 选项 卡 上 反选 指定 断 点 上 的 

复 选 框 。 

a 当 一 个 断 点 被 触发 时 单 步 执行 代码 : 源码 面板 上 面 的 图 标 允 许 你 单 步 进 入 (如 果 当 前 的 代 
码 行 调用 了 一 个 函数 ， 执 行 这 个 操作 会 单 步 进 入 这 个 函数 内 部 )、 单 步 执 行 (直接 执行 函 
数 调用 ,而 不 进入 函数 内 部 ) 和 单 步 跳 出 (执行 当前 所 在 的 函数 ,然后 从 当前 的 函数 跳出 
到 调用 函数 位 置 )。 

Ch 即时 观察 局 部 变量 和 你 感 兴趣 的 表达 式 的 值 : 在 Watch 子 选项 卡 中 完成 这 些 操 作 。 


为 了 让 你 熟悉 上 面 的 操作 , 我 在 这 里 给 出 一 个 例子 , 在 这 个 例子 中 会 使 用 到 上 面 提 到 的 所 有 
操作 ， 当 然 你 也 可 以 在 其 他 浏览 器 中 尝试 这 个 例子 。 首 先 ， 假设 我 们 想 在 fibo() 函数 被 调用 且 
传 入 的 参数 足够 小 (比如 ， 小 于 5) 的 情况 下 进入 单 步 模 式 。 为 了 做 到 这 一 点 ， 我 们 首先 需要 在 
这 个 函数 的 第 一 行 设置 断 点 ， 然 后 在 这 个 断 点 上 配置 合适 的 条 件 。 


(1) 在 函数 的 首 行 ( 对 应 图 中 的 第 2 行 ) 加 上 断 点 。 
(2) 右 击 刚刚 加 上 的 断 点 ， 然 后 在 提示 框 中 输入 你 需要 的 条 件 : base<5。 确 认 你 所 看 到 的 和 
图 B-2 中 的 情形 相 一 致 。 


一 切 都 设置 好 了 ! 现在 单 击 Web 页 面 中 的 Fibo(20) 按 钮 ， 然 后 函数 会 开始 递归 的 执行 ， 直 到 
断 点 被 触发 。 单 击 右边 面 板 中 的 Stack 子 选项 卡 来 查看 你 现在 所 在 的 位 置 :你 应 该 会 看 到 类 似 图 
B-3 中 的 画面 ， 这 些 内 容 展 示 了 当前 的 递归 状态 : 已 经 同僚 了 15 层 (如果 疝 下 滑动 滚动 条 ， 你 会 
看 到 初始 的 onclick 事 件 处 理 器 调用 )。 


单 击 Watch 子 选项 卡 ， 你 可 以 看 到 所 有 的 局 部 变量 ， 包 括 当 前 绑 定 (this 对 象 当 前 所 引用 的 
内 容 ) 和 参数 。 在 图 B-4 中 ， 你 可 以 看 到 我 们 正在 执行 一 个 全 局 函数 (因为 this 正 指向 全 局 的 
wingow 对 象 )，pase 参 数 的 值 为 4。 注 意 你 也 可 以 在 Watch 子 选 项 卡 里 修改 这 些 值 : 双击 列表 中 和 欲 
修改 的 值 ， 然 后 键入 新 值 。 











+ 
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图 B-2 ”在 Firebug 中 设置 一 个 有 条 件 的 断 点 
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1 function fibolbase. 
©2 if (base <= 2) Hya 
return 1; 
return fibo(base - 1) + fibo(base - 2); nibo 
5| } fibo 
fib 
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fibo 
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图 B-3 在 Firebug 中 观察 栈 轨迹 


接 下 来 让 我 们 看 看 不 同 的 单 步 操作 。 你 现在 应 该 位 于 fipo () 函数 内 部 的 第 1 行 (也 就 是 代码 
的 第 2 行 )。 单 击 位 于 蓝 色 的 Play 图 标 〈 用 来 恢复 执行 ) 右边 的 Step Into 图 标 ， 由 于 条 件 为 假 ， 下 
面 一 行 被 跳 过 ， 然 后 到 达 return 所 在 的 这 一 行 。 再 次 单 击 这 个 按钮 ， 由 于 这 一 行 有 函数 调用 ， 
而 你 使 用 的 是 单 步 进入 ， 因 此 你 会 递归 地 进入 同样 的 函数 ， 而 此 时 base 值 为 3( 请 在 Watch 子 选 
项 卡 中 加 以 确认 )。 








# A > console HTML CSS | Scriptv| DOM Net YSlow Q @@ of 
debugbench.js bo > are Pp Watch 回 Stack Breakpoints 

1 function fibo(base) { New watch expression... 

ez if Chase a 2) > this Window debugbench.html 
urn 1; P 
4 return fibo(base - 1) + fibo(base - 2); = scopeChain [ Call base=4, Window debugbench.htm/ 
5| } 0=Call 1=window ] 
base 4 











[remine Yow 0.0765 en-us 4 
图 B-4 Firebug 中 的 Watch 视图 





假如 你 想 回 到 你 离开 时 的 那 一 层 (base 值 等 于 4), 而 不 想 再 一 层 又 一 层 地 进入 函数 内 部 ,你 
可 以 依照 下 列 步骤 。 


(1) 删除 或 禁用 之 前 你 设置 的 断 点 。 否 则 每 当 用 小 于 5 的 参数 调用 fipo () 时 , 断 点 就 会 被 触发 。 
单 击 Breakpoints 子 选项 卡 ， 反 选 这 个 断 点 以 禁用 它 。 

(2) 单 击 Step Out 图 标 ( 源 码 面 板 上 部 的 最 后 一 个 图 标 )， 让 代码 继续 执行 ， 直 到 回 到 之 前 的 
栈 轨 迹 位 置 。 这 时 你 会 发 现 自己 位 于 之 前 的 return 行 处 ，base 值 也 恢复 为 原来 的 4。 

(3) 如 果 你 重复 上 面 的 操作 ， 你 会 一 层 又 一 层 地 回 退 (也 意味 着 base 值 会 回 漳 到 越 来 越 高 的 
值 )， 如 此 这 般 操作 ， 过 一 会 儿 你 会 发 现 Stack 子 选项 卡 里 面 的 栈 轨迹 减少 了 很 多 。 

(4) 如 果 你 厌倦 了 手动 的 单 步 执行 ， 而 想 恢 复 正 常 执行 ， 直 接 单 击 Play 按钮 ( 带 有 蓝 色 箭头 
的 按钮 ) 即 可 。 
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需要 注意 ,所 有 的 单 步 或 执行 图 标 都 有 对 应 的 快捷 键 , 但 是 这 些 快 捷 键 会 根据 你 所 使 用 的 平 
台 而 有 所 不 同 。 由 于 图 标的 tooltip 一 般 会 显示 该 图 标 对 应 的 快捷 键 ， 所 以 你 只 需 把 鼠标 指针 停留 
在 图 标 上 ， 然 后 查看 这 些 快捷 键 。 


B.3 Safari 和 Web Inspector 


这 些 年 Safari 一 直 在 改进 Web Inspector， 在 4.0 版 本 中 ，Web Inspector 已 经 具备 了 相当 强大 的 
功能 〈 听 说 最 新 的 版 本 已 经 取得 了 相当 的 进展 )。 虽 然 Web Inspector 的 DOM 修 改 功能 比 同类 软件 
稍 弱 〈 和 Firebug 相 比 ) ， 不 过 它 的 控制 台 和 JavaScript 调 试 器 已 经 和 Firebug 旗 鼓 相 当 。 


ee Pocket JavaScript debug bench 
aje +] À file:///Users/tdd/perso/livres /JSPocket/Book/code/debugbench.htm! 心性 Qr Google 








Debug bench 











图 B-5 _ Safari 的 Web Inspector 


图 B-5 展 示 了 控制 台面 板 开 启 的 Web Inspector 的 Scripts 选 项 卡 〈 不 管 当前 的 选项 卡 是 什么 , 你 
都 可 以 单 击 底部 的 图 标 或 按 Esc 键 来 切换 控制 台 的 开 闭 状态 )。 


在 当前 Safari 的 公共 发 行 版 中 ，Web Inspector 和 Firebug 在 一 些 关 键 部 分 有 所 不 同 。 比 如 ， 你 
不 能 删除 一 个 断 点 ， 你 只 能 禁用 这 个 断 点 ， 你 也 无 法 在 断 点 上 设置 条 件 ， 而 且 也 没有 监视 功能 。 
尽管 如 此 ，Web Inspector 仍 然 是 一 个 很 有 用 的 工具 (而且 其 后 续 的 版 本 会 越 来 越 好 )。 图 B-6 展 示 
了 Web Inspector 的 递归 调用 栈 显示 功能 ， 可 以 看 出 ， 在 这 方面 它 和 Firebug 很 相似 。 

















图 B-6 ”在 Web Inspector 中 进行 单 步调 试 
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B.4 IE6、IE7、IE 工 具 栏 以 及 Web 开 发 者 工具 


Internet Explorer 一 直 被 视 为 Web 开 发 者 的 克星 ， 这 是 因为 浏览 器 之 战 以 网 景 战 死 沙 场 而 结束 
之 后 ， 下 的 开发 突然 陷入 停 王 状 态 。 好 在 微软 在 最 近 的 正版 本 (IE8 和 IE9 已 经 取得 了 非常 大 的 进 
F) 中 投入 了 巨大 的 人 力 和 财力 ， 不 过 先前 的 正版 本 (IE6 和 IE7) 在 Web 标 准 面前 已 经 落后 了 不 
止 十 年 ， 对 JavaScript 的 支持 也 是 一 样 。 


雪上 加 霜 的 是 , IE6 和 IE7 中 连 一 个 好 用 的 JavaScript 调 试 器 都 没有 。 它们 只 有 一 个 错误 百出 的 
控制 台 ， 而 这 就 是 全 部 。 如 果 你 在 这 几 个 版 本 的 正中 寻求 调试 方案 ,那么 下 面 这 几 个 选择 值得 你 


抛 开 过 时 的 Microsoft Script Debugger 不 谈 ， 最 常用 的 工具 是 Visual Web 开发 者 便捷 版 : 它 是 
微软 的 大 型 工具 Visual Web 开 发 者 工具 (实际 上 是 一 个 定制 版 的 Visual Studio， 主 要 面向 Web 开 
发 者 ) 的 免费 受 限 版 本 。 它 很 早 就 发 行 了 ， 而 且 它 有 一 个 相当 不 错 的 JavaScript 调 试 器 
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图 B-7 Visual Web 开 发 者 工具 2008 快 捷 版 的 欢迎 页 面 


所 以 ， 除 非 你 正在 使 用 这 些 工 具 ， 否 则 你 就 得 下 载 一 个 多 达 数 G 的 巨大 文件 ” (那个 2.6MB 
的 安装 文件 只 是 一 个 代理 工具 ) ， 而 这 只 是 为 了 调试 JavaScript。 但 如 果 你 确实 需要 在 IE6 或 IE7 上 





© 下 载 地 址 http://www.microsoft.com/express/download/default.aspx。 
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调试 JavaScript， 这 是 值得 的 ， 除 非 你 想 被 这 两 个 浏览 器 搞 崩 神 。 注 意 Silverlight 和 SQL Server 都 不 
是 必需 的 安装 配置 项 ， 因 为 我 们 只 需要 能 够 正常 调试 JavaScript 就 可 以 了 。 


安装 完成 之 后 ， 启 动 Visual Web 开发 者 便捷 版 〈 由 于 这 一 串 词 实在 太 扬 口 ， 所 以 接 下 来 我 用 
“VWDE” 来 代表 它 )。 在 配置 完 初始 项 之 后 ， 你 会 看 到 类 似 于 图 B-7 的 欢迎 页 面 。 


由 于 Express 版 是 免费 的 , 所 以 它 有 一 些 功能 限制 , 比如 它 不 允许 把 源 代码 附加 到 一 个 运行 的 
浏览 器 上 。 不 过 ， 你 可 以 使 用 一 个 技巧 : 利用 VWDE 生 成 附加 浏览 器 。 这 个 浏览 器 是 VWDE 在 
调试 模式 下 生成 的 ， 所 以 一 旦 出 现 JavaScript 错 误 ，VWDE 的 调试 器 就 会 把 这 个 错误 拦截 下 来 。 


我 们 可 以 用 附加 浏览 器 浏览 我 们 所 需要 的 任何 东西 。 一 旦 出 现 错误 , VWDE 会 自动 进入 调试 
器 界面 ,我们 既 可 以 在 这 里 获取 运行 中 的 文档 , 也 可 以 在 其 中 添加 断 点 。 你 需要 后 者 来 执行 本 篇 
附录 第 一 节 的 操作 。 


为 了 生成 附加 的 IE6 或 E7 浏 览 器 ， 我 们 需要 对 VWDE 的 需求 作出 一 些 妥 协 。 
下 面 是 我 们 必须 遵守 的 两 条 原则 。 


a 我 们 必须 建立 一 个 开启 调试 模式 的 VWDE 工 程 。 
O 我 们 必须 把 IE7 设 置 为 默认 浏览 器 ， 以 确保 在 使 用 “Start debugging” 功 能 时 启动 它 。 


这 两 个 需求 都 只 需 设置 一 次 (除非 你 在 这 台 机 器 上 做 测试 , 以 至 于 需要 不 停 地 切换 默认 浏览 
。 下 面 是 具体 的 操作 流程 。 


(1) 打开 IE6 或 IE7， 然 后 单 击 工 具 > Internet 选 项 ……… 

(D 进入 高 级 选项 卡 ， 然 后 滑动 到 浏览 区 。 

(3) 色 选 “脚本 运行 出 错时 提示 ”， 同 时 反选 “禁用 脚本 调试 ……”。 

(4) 关闭 正 。 

(5) 单 击 “文件 ”> 新 建 网 站 …… 

(6) 选择 “ 空 网 站 ”选项 ， 设 置 好 网 站 所 在 的 目录 后 ， 单 击 “确认 ”。 

(7) 单 击 “ 开 始 调试 ”表单 项 或 对 应 的 图 标 ( 带 有 绿色 箭头 的 图 标 )。 

(8) 在 第 一 次 启动 的 时 候 ，VWDE 会 检测 到 你 的 项 目 缺 少 一 个 特殊 的 Web.config 文 件 (调试 所 
需 的 配置 文件 ) 。 它 会 弹出 对 话 框 询问 你 是 否 要 在 关闭 调试 的 状态 下 继续 一 一 很 明显 ， 根 据 提示 
勾 选 第 一 个 选项 ， 然 后 单 击 确认 。 

(9) 接 下 来 你 会 发 现任 务 栏 中 多 了 一 个 服务 器 图 标 ， 这 代表 一 个 绑 定 在 动态 端口 的 开发 服务 
器 已 经 启动 。 接 着 ， 正 打开 了 一 个 以 项 目 目录 为 名 称 的 空 目录 清单 (这 里 可 能 会 提示 一 个 警告 ， 
显示 浏览 器 当前 在 Intranet 安 全 区 域 下 工作 ， 不 过 这 对 我 们 的 工作 没有 影响 )。 到 这 里 ， 一切 已 配 
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置 完 毕 ， 准 备 开 始 吧 ! 


现在 我 们 已 经 完成 了 所 有 配置 ， 接 下 来 打开 debugbench html 文 件 ， 然 后 进入 VWDE。 在 右边 
的 解决 方案 浏览 器 面板 内 ， 你 会 看 到 里 面 列 出 了 正在 运行 的 两 个 文件 : debugbench.html 和 
debugbench.js， 双 击 后 者 。 





这 时 ， 你 就 可 以 在 源码 窗口 里 按照 之 前 的 方式 设置 断 点 了 ( 单 击 沟 权 区 )， 设 置 完成 后 , 切 
换 回 卫 ， 然 后 单 击 Fibo(20) 按 钮 ， 你 就 会 进入 调试 器 中 的 单 步调 试 模式 ， 如 图 B-8 所 示 。 请 看 ! 


© VVD8 (Debugging) - Visual Web Developer 2008 Express Edition 
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| function fibo (pase) { “ial E 
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return fibo(base - 1) + fibo(base - 2); debugbench.html 
3 3 debugbench.js 
© cAvyps\, 
E Web. config 
Ad| 
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fibo JScript E 
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a Locals 局 watrh Ds Call Stack E Immediate Window | 国 Output (i Error List 
Ready 


+s démarrer © wps (Debugging) .. Pocket JavaScript ... fe Y:\persollivres\J5P... 





图 B-8 调试 IE7 里 的 脚本 


B.5 IE8 和 开发 者 工具 


毫 无 疑问 ，Internet Explorer 8 在 IE 世界 中 迈 出 了 一 大 步 。 除 了 支持 Web 标 准 (虽然 和 其 他 的 
Ae 但 它 总 算 脱 离 了 史前 时 代 ) ， 作 为 JavaScript 开 发 者 的 你 肯定 会 对 下 面 这 些 





DIE8 中 的 JScript 引 擎 的 速度 是 其 他 浏览 器 中 的 JavaScript 引 擎 的 七 分 之 一 左右 。 它 和 Chrome 
的 V8、Safari 最 新 的 Squirrelfish Extreme 以 及 Firefox 的 Tracemonkey 差 距 尤 其 明显 一 一 前 者 
的 速度 是 后 者 的 十 二 分 之 一 左右 。 

这 昕 起 来 一 点 也 不 像 是 什么 好 消息 ,但 要 注意 ， 上 一 个 版 本 的 正 7 中 的 JScript 引 擎 的 速度 为 

IE8 中 的 九 十 分 之 一 左右 , 更 不 用 说 IE6 了 。IE 团 队 把 JScript 引 擎 的 速度 提高 了 大 约 13 倍 , 这 已 
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经 相当 不 错 了 ， 喜 不 喜欢 由 你 。 
DIE8 中 的 DOM 性 能 (曾经 是 JavaScript 开 发 者 编写 脚本 的 晋 梦 ) 得 到 了 显著 的 提升 一 一 现在 
“只 ”是 其 他 训 览 器 的 四 分 之 一 ， 相 对 之 前 版 本 的 卫 ， 这 已 经 是 很 大 的 改进 了 。 
口 相对 于 下 6 和 IE7 中 粳 糕 的 开发 者 工具 栏 ，IE8 内 置 的 “开发 者 工具 ”要 强大 整洁 得 多 ， 它 内 
置 一 个 真正 的 JavaScript 调 武器 一 一 一 个 不 需要 在 了 和 外 部 调试 工具 间 来 回 切换 的 JavaScript 
调试 器 。 
所 以 , 现在 我 们 不 但 可 以 在 下 世界 中 实现 那些 绚丽 的 效果 和 Ajax 操 作 ， 而 且 还 能 够 更 加 轻松 
地 完成 调试 工作 ! 
顺便 提 一 下 ， 尽 管 下 8 做 了 不 少 工作 ， 以 减少 脚本 载 入 造成 的 可 赛 觉 的 性 能 影响 ， 你 仍 应 该 
使 用 一 些 通用 的 优化 方式 〈 比 如 底部 载 入 脚本 ”、 脚 本 拼接 和 gzip”ping ) 。 


图 B-9 展 示 了 处 于 调试 状态 中 的 了 8 开发 者 工具 面板 ， 在 脚本 选项 卡 中 ， 你 可 以 看 到 熟悉 的 断 
。 单 击 工具 条 上 的 大 按钮 就 可 以 轻松 地 切换 调试 器 的 开启 /关闭 状态 。 单 步调 试 选项 、 本 地 变 
量 、 监 视 、 调 用 栈 检查 、 控 制 台 (我 真希 望 微软 不 要 再 管 它 叫 “即时 窗口 ”“……) 等 功能 一 应 
具 全 ， 断 点 可 以 被 禁用 或 删除 (不 过 现在 还 不 能 在 断 点 上 设置 条 件 )。 
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图 B-9 IES 开发 者 工具 : Script 选项 卡 


这 正 是 我 们 所 需要 的 ! 这 套 工具 用 起 来 还 不 错 ， 至 少 到 目前 为 止 ， 它 还 没有 把 我 的 IE8 搞 崩 


frat o 





® 8 Whttp://developer.yahoo.com/performance/rules.html#JavaScript_bottom, 

© 如 果 需 要 更 多 关于 提升 网 页 载 入 和 演 染 性 能 的 资料 ， 请 参考 Thomas Fuchs 和 Amy Hoy 的 JavaScript Performance 
Rocks/ 一 书 ， 或 参考 http://developer.yahoo.com/performance/rules.html。 

© 微软 在 下 9 中 已 把 即时 窗口 更 名 为 “控制 台 ”。* 
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B.6 Opera 和 Dragonfly 


Opera 采 用 了 一 种 不 常见 的 方法 来 提供 开发 者 工具 。 它 的 Dragonfly 采 用 了 “离线 在 线 混 合 模 
式 ”， 由 于 Opera 会 在 你 打开 Dragonfly 面 板 的 时 候 连 接 互 联网 ， 然 后 自动 下 载 更 新 ， 这 就 意味 着 你 
在 第 一 次 使 用 它 的 时 候 需 要 处 于 在 线 状态 , 不 过 这 应 该 不 算 什么 问题 。 不 过 , 根据 我 个 人 的 经 验 ， 
我 发 现 它 似 乎 必需 处 于 在 线 状 态 才 能 够 正常 工作 。 在 离线 状态 下 ,即便 我 之 前 下 载 过 它 ， 它 在 启 
动 时 仍然 经 常 由 于 无 法 连接 Opera 的 服务 器 (或 其 他 原因 ) 而 被 终止。 











Dragonfly 当 前 的 版 本 (在 本 书 的 写作 时 还 是 alpha3) 显然 还 比较 粗糙 ， 我 希望 Opera 的 设计 
者 能 够 花 时 间 好 好 设计 一 下 ， 而 不 是 搞 成 现在 这 样 一 层 套 一 层 的 选项 卡 界面 。 我 认为 其 他 调试 工 
有 具 使 用 Firebug 那 样 的 布局 是 有 原因 的 〈 既 简单 又 足够 强大 ) ， 所 以 Opera 实 在 没 必 要 独辟蹊径 ,， 搞 
出 一 套 既 复杂 又 难 用 的 界面 。 不 过 ， 最 近 的 版 本 中 这 个 问题 似乎 得 到 了 改善 。 





ane Pocket JavaScript debug bench 
[AE o rece scn ceo e S 
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© {AS file://locathost/Users/tdd /perso/livres/JSPocket/Book/code/c Y Q 








Debug bench 
(CFibo(20) ) 
SB- k IQ 100% v 
| DOM Scripts Network Error Console Settings Mn Dx 
> cz C Se Gt Be El | debugbenchjs (vj 4 Search m 
1 function fibo(base) { + arguments object 
> @ if (base <= 2) x this objec 
3 return 1; base 
4 return fibo(base - 1) + fibo(base - 2); 
5} 
6 
Source | Command Li Call Stack | Inspection | Thread Log 
2 - 




















KIB-10 Opera Dragonfly; Scripts 选 项 卡 


为 了 实现 我 们 之 前 的 JavaScript 调 试 步骤 ， n T 
有 具 条 上 的 按钮 包含 了 各 种 常用 的 操作 : 运行 /继续 、 单 步调 试 、 单 步 进 入 、 单 步 退出 以 及 在 何 时 
自动 触发 调试 模式 (比如 ， 进 入 一 个 函 as 个 错误 ) 。 你 可 以 在 下 拉 列 表 中 选择 你 打算 进 
行 调试 的 源 文件 (JavaScript 或 HTML)， 源码 左 边 的 沟 槽 用 来 设置 断 点 (右键 单 击 断 点 来 禁用 / 重 
新 启用 它 )， 代 码 窗口 下 面 ( 没 错 ， 就 是 这 个 诡异 位 置 ) be line 子 选项 卡 提供 了 一 个 类 
似 于 控制 台 的 命令 行 ， 右 边 的 选项 卡 显示 了 调用 栈 和 局 部 变量 (Inspection 子 选项 卡 中 )。 


























总 体 来 说 ， 它 可 以 应 付 常规 的 调试 工作 。 不 过 我 得 承认 ,我 个 人 的 调试 过 程 是 这 样 的 : 首先 
在 Safari 或 Firefox 的 环境 下 编写 代码 ， 然 后 到 另 一 个 浏览 器 (Firefox 或 Safari) 中 测试 效果 ， 并 作 
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出 需要 的 调整 。 然 后 按照 IE8、IE7 到 下 6 的 顺序 逐步 测试 ， 最 后 ， 为 了 保证 代码 的 可 用 性 ， 我 会 
在 Opera 和 Chrome 中 做 一 个 快速 检查 。 


随后 ， 我 会 按照 先前 的 顺序 进行 XHIML/MCSS 开 发 。 同 HIML 标 签 和 样式 类 似 ， 如 果 你 的 脚 
本 可 以 在 Safari、Firefox 和 IE 里 面 正常 运行 ， 那 一 般 它 在 Chrome 和 Opera 里 面 就 不 会 出 什么 问题 。 
所 以 ， 我 很 少 在 Opera 中 调试 ， 因 为 几乎 没有 这 个 必要 。 

最 后 提 一 下 ，Opera 中 可 以 开启 一 个 调试 菜单 ， 从 而 直接 访问 一 些 函 数 ， 这 个 功能 有 点 像 
Firefox 中 的 Web 开 发 者 工具 条 (Web Developer Toolbar) 扩 展 或 是 Safari 的 开发 菜单 ,你 可 以 在 Opera 
中 下 载 一 个 配置 文件 ， 以 开启 这 个 功能 。 


B.7 虚拟 机 是 你 的 朋友 


现在 内 存 已 经 很 便宜 了 。 大 多 数 的 Web 开 发 者 已 经 在 配 有 4GB 到 8GB 内 存 的 机 器 上 进行 开发 ， 
更 有 一 些 幸 运 的 家 伙 用 上 了 SSD 硬 盘 , 硬件 的 提升 给 他 们 带 来 了 更 为 流畅 的 体验 ,在 这 种 情况 下 ， 
虚拟 机 开始 进入 了 专业 Web 开 发 者 的 视野 。 虚 拟 机 软件 一 般 很 便宜 (有 的 甚至 是 免费 的 )， 而 且 
有 各 种 各 样 的 选择 : Parallels Desktop® (运行 在 0SX、Windows 和 Linux 之 上 )、VMware Fusion”( 运 
行 在 OS X 之 上 ) 或 VMware Workstation® (运行 在 Windows 之 上 )、Sun 提 供 的 Virtual Box”， 除 此 
之 外 还 有 很 多 选择 。 

由 于 虚拟 机 功能 越 来 越 强 大 , 我 们 可 以 在 不 同 的 虚拟 机 中 设置 不 同 的 浏览 器 环境 (IE6 到 IE9、 
Safari、Chrome、Firefox、Opera 以 及 其 他 浏览 器 的 各 个 版 本 ) 以 便于 进行 测试 。 之 所 以 要 这 样 做 ， 
是 因为 多 数 浏 览 器 不 允许 你 在 单个 操作 系统 下 运行 该 浏览 器 的 多 个 版 本 。 如 果 你 非 要 这 么 做 , BB 
么 浏览 器 的 行为 可 能 会 和 单一 版 本 环境 下 的 浏览 器 行为 不 一 致 〈 比 如 ， 在 Windows XP 上 安装 第 
三 方正 内 核 浏 览 器 所 带 来 的 问题 )。 虚 拟 机 允许 你 把 不 同 版 本 的 浏览 器 隔离 到 独立 的 OS 镜像 中 。 
更 妙 的 是 ， 虚 拟 机 允许 你 在 同一 台 机 器 上 运行 这 些 镜像 。 一 般 来 说 ， 我 会 选择 OS X 作 为 宿主 OS 
(host OS) ， 这 个 选择 涉及 许多 因素 ， 但 最 主要 的 一 点 是 : 在 虚拟 机 中 搭建 Linux 或 Windows 环 境 
很 容易 ， 但 在 非 Mac 平 台 上 的 虚拟 机 中 搭建 OS X 环 境 异 常 困难 。 


所 以 , 请 务必 使 用 虚拟 机 ! 这 比 使 用 多 台 机 器 , 或 是 使 用 冲突 百出 的 远程 桌面 "要 方便 很 多 。 












































O 参见 http:/www.parallels.com/products/desktop/。 

© 参见 http:/www.vmware.conyfr/products/fusion/。 

© 参见 http:/www.vmware.com/products/workstation/。 

© Z Whttp://www.virtualb6ox.org/, 

@ 现实 的 开发 中 ， 经 常会 有 多 个 开发 者 访问 同一 台 机 器 的 远程 桌面 ， 造 成 各 种 冲突 。* 
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B.8 网 络 可 能 是 你 的 敌人 


有 时， 你 可 能 会 碰 到 一 些 海 森 堡 式 bug”: 只 要 你 一 走 开 ， 这 些 bug 就 会 出 现 。 但 当 你 开始 单 
步 执行 你 的 代码 , 或 是 试图 在 你 的 开发 环境 中 重 现 这 个 bug 的 时 候 , 这 些 bug 又 莫名 其 妙 地 消失 了 。 
为 什么 会 这 样 呢 ? 


这 些 bug 往 往 会 在 高 延迟 或 是 容易 掉 线 的 网 络 环境 (拨号 上 网 ， 或 是 低 质量 的 代理 服务 器 ) 
下 运行 Ajax 程 序 的 时 候 出 现 。 你 可 以 用 一 些 被 称 为 “减速 代理 ”的 软件 来 重 现 这 种 环境 。 在 这 方 
面 ， 我 最 喜欢 的 工具 (可 能 也 是 最 有 名 的 工具 ) 是 Charles”， 它 基于 Java 开 发 (因此 它 可 以 在 所 
有 主流 平台 下 运行 )。 它 不 但 可 以 控制 带宽 、 调 整 延迟 和 改变 网 络 行为 ， 而 且 还 可 以 录制 和 重 放 
网 络 会 话 ， 并 提供 详细 的 HITP/HTTPS 监 控 。 这 样 的 工具 真 可 谓 神器 ! 























® 参见 http://en.wikipedia.org/wiki/Heisenbug， 指 那些 开发 者 一 走 开 就 出 现 ， 一 调试 就 没 影 的 诡异 bug。* 
© 参见 http:/www.charlesproxy.com/。 





附录 C JavaScript 框 架 概 览 





JavaScript 本 身 是 一 门 伟大 的 语言 。 不 过 , 如 果 要 与 环境 (比如 DOM、 CSS 或 XMLHttpReques 
标准 ， 而 是 自己 搞 出 了 这 样 那样 的 标准 。 


交互 ,即使 是 最 常见 的 客户 端 场景 ,纯粹 使 用 JavaScript 就 像 是 用 石 符 和 原木 造 一 月 
这 是 由 两 个 因素 导致 的 : 原始 的 DOM 接 口 缺 乏 合理 的 高 层 功 能 




















t) 
摩天 大 厦 一 样 。 
多 数 浏 览 器 并 不 完全 遵循 Web 
大 量 的 JavaScript 框 架 因 此 而 出 现 。 其 中 的 一 些 框 架 已 经 拥有 足够 多 的 用 户 群 , 并 发 展 得 相当 
成 熟 。 在 本 篇 附录 中 ， 我 将 为 你 一 一 介绍 这 些 优秀 的 JavaScript 框 架 
现在 要 认识 到 这 一 点 : 你 应 该 在 手头 的 项 目 或 任务 中 尽 可 能 使 用 框架 
因为 相对 于 你 自己 的 代码 ,这 些 框架 的 源码 更 加 稳定 ， 因 
善 的 文档 ， 并 拥有 更 好 的 支持 。 因 此 相对 于 手工 编码 ,使 用 这 些 术 

编码 没什么 错 ， 不 过 要 务实 一 些 | 





其 至 是 多 个 框架 
为 它们 往往 经 历 过 更 多 测试 ， 具备 更 完 
匡 架 会 节省 大 量 的 开发 时 间 。 想 
选择 框架 是 一 项 重要 的 任务 ， 你 应 该 注意 下 面 这 儿 个 因素 。 
说 ， 它 有 没有 配套 的 测试 套件 ? ) 


a 














O 它 已 经 发 行 多 长 时 间 了 ? 它 的 代码 足够 成 熟 和 稳定 吗 ? 它 得 到 了 足够 的 测试 吗 ? (ee 
a 否 存 在 一 个 强大 的 、 充 满 活力 的 社区 ?容易 获得 帮助 吗 ? 

O 它 是 否 具 备 良 好 的 文档 (最 好 是 官方 文档 ) ? 

O 它 的 API 设 计 能 够 满足 

口 这 11 


个 框架 是 否 面向 特定 的 目标 ? 
的 目标 或 是 要 求 吗 ? 

















通过 HTTP 响 应 


你 的 个 人 喜好 ? 如 果 使 用 这 个 框架 ， 你 将 会 写 出 什么 样 的 代码 ? 
它 是 否 面 向 特定 的 开发 者 群体 ? 如 果 是 这 样 , 它 能 满足 你 
经 常 有 人 把 代码 库 的 大 小 也 作为 一 个 评价 标准 ， 但 实际 上 你 并 不 需 关 心 它 。 花 大 把 时 间 载 
入 JavaScript 的 日 子 已 经 一 去 不 复 返 了 。 现 在 即使 是 一 款 庞 大 的 、 带 有 大 量 注 释 的 代码 库 , 通过 应 
用 各 种 技术 ,我们 也 可 以 内 电 般 地 载 入 它 。 这 些 技术 包括 注释 清除 、 代 码 压缩 ” 
O 注意 不 是 代码 混淆 ， 尽 管 如 此 ， 潜 在 的 调试 者 绝对 不 会 喜欢 被 压缩 成 面目 全 非 的 代码 。 
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头 改 善 浏览 器 缓存 、CDN 分 发" 等 。 


主流 的 框架 会 使 用 各 种 各 样 的 机 制 ,以 确保 你 的 页 面 在 短 时 间 内 载 入 ， 所 以 就 不 要 在 代码 大 
小 这 种 细 枝 末 市 的 事情 上 浪费 时 间 了， 是 吧 ? 


C.1 Prototype、 script.aculo.us 和 Scripty2 


Prototype 是 第 一 款 为 大 众 所 熟 知 的 JavaScript 框 架 。2005 年 2 月 ，Sam Stephenson 在 37signals 
公司 "创建 了 这 个 框架 以 提供 一 个 统一 的 、 易 用 的 API， 来 进行 DOM 操 作 、 事 件 处 理 和 Ajax 操 作 。 
同年 Thomas Fuchs 创 建 了 scriptaculo.us 框 架 以 作为 Prototype 的 补充 API， 从 初期 的 黄 褪 技术 
(Yellow Fade Technique) 到 现在 ， 它 已 经 发 展 为 集 视觉 效果 、 拖 放 操 作 以 及 UI Widget 于 一 身 的 成 
熟 框 架 。Scripty2 是 对 script.aculo.us 的 一 个 彻底 的 重 写 和 扩展 ， 现 在 还 处 于 测试 阶段 ”， 它 提供 了 
丰富 的 视觉 效果 。 

Prototype 的 开发 团队 以 五 六 个 志愿 者 为 核心 ， 他 们 中 最 著名 的 要 数 Sam、Tobie Langel 和 
Andrew Dupont。Prototype 使 用 MIT 许 可 证 〈 基 本 上 来 说 ， 它 是 开源 的 ， 可 以 被 到 处 使 用 ) ， 你 上 
以 在 GitHub 上 获得 Prototype 的 完整 源 代码 ，Prototype 还 有 一 个 回馈 邮件 列表 和 一 个 bug 报 告 系统 。 


围绕 着 Prototype 的 发 展 ， 一 个 生态 系统 逐渐 形成 ， 这 包括 PDoc (一 个 代码 内 联 文档 系统 )、 
Evidence (一 款 单 元 测试 框架 )、Sprockets (一 个 高 级 JavaScript 处 理 和 拼接 工具 ) 以 及 Scripteka 
(一 个 插件 库 ) 。Prototype 拥 有 一 个 活跃 的 社区 ， 他 们 的 大 多 活动 在 Google Groups 中 进行 。 介 绍 
Prototype 的 书 也 有 很 多 ， 比 如 Andrew Dupontf) Practical Prototype and script.aculo.us 以 及 我 的 


Prototype and script.aculo.us , 




















虽然 Prototype 被 认为 是 第 一 款 为 大 众 所 熟 知 的 JavaScript 框 架 , 不 过 在 过 去 的 两 年 中 , 它 的 人 
气 一 直 在 慢 慢 下 滑 ， 很 明显 ，jQuery 吸 引 了 更 多 关注 。 不 过 ,我 认为 这 两 个 框架 所 强调 的 是 不 同 
的 (尽管 有 一 定 的 重合) 需求 (它们 显然 也 有 着 截然 不 同 的 代码 美学 )。 

Prototype 的 架构 、 代 码 美学 以 及 内 聚 的 API 设 计 使 其 非常 适合 编写 健壮 的 API。 它 借鉴 了 很 多 
Ruby 的 优点 (比如 Enumerable 模 块 )， 从 而 使 其 易于 编写 包含 大 量 算法 的 代码 。 如 果 你 想 利 用 
JavaScript 编 写 优秀 的 应 用 , 并 对 这 些 应 用 做 长 时 间 的 扩展 和 维护 , 那么 Prototype 是 一 个 不 错 的 选 
择 。 但 是 如 果 你 并 不 打算 了 解 JavaScript， 而 只 是 需要 用 一 些 控件 和 播 件 拼 凑 出 一 个 网 站 的 话 , AB 























@ CDN 即 Content Delivery Network， 其 基本 思路 是 尽 可 能 避 开 互联 网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 
环节 ， 使 内 容 传输 得 更 快 、 更 稳定 。* 

© 著名 的 互联 网 创业 公司 ， 流 行 的 Ruby on Rails 框架 即 出 于 此 。* 

@ 当前 Scripty 的 最 新 版 本 是 2010 年 9 月 26 日 的 2.0 Beta, * 
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Prototype 或 许 不 是 你 的 选择 。 
下 面 列 出 了 这 些 库 在 本 书 编写 时 的 最 新 版 本 以 及 一 些 你 可 能 需要 的 链接 。 


口 Prototype 的 官方 网 站 是 http://prototypeJavaScript.org/， 它 当前 的 版 本 是 1.7。 

口 script.aculo.us 的 官方 网 站 是 http://script.aculo.us/， 它 当前 的 版 本 是 1.8.3， 它 的 开发 已 经 基 
本 停滞 ， 因 为 开发 者 已 将 注意 力 转移 到 了 Scripty2。 

O Scripty2 的 官方 网 站 是 http:/scripty2.com/， 它 当前 的 版 本 是 Alpha release 6, 

Q PDoc 的 官方 网 站 是 http:/pdoc.org/。 

Q Sprockets 的 官方 网 站 是 http://getsprockets.org/。 

口 Scripteka 的 官方 网 站 是 http://scripteka.com/。 

O 支持 邮件 列表 是 http://groups.google.com/group/prototype-scriptaculous。 

O 反馈 邮件 列表 是 http://groups.google.com/group/prototype-core。 咨 询问 题 的 话 , 请 使 用 支持 
邮件 列表 ! 

口 Prototype 在 GitHub 上 的 代码 存档 在 http://github.com/sstephenson/prototype。 

O 如 果 你 需要 报告 bug， 请 阅读 http://prototypeJavaScript.org/contribute 里 面 的 向 导 ， 按 要 求 
仔细 完成 你 的 报告 ， 然 后 将 其 提交 到 https://prototype.lighthouseapp.com/, 




















C.2 jQuery 和 jQuery UI 


2005 年 8 月 ，John Resig 在 使 用 过 Prototype 之 后 ， 认 为 Prototype 提 供 的 功能 很 不 错 ， 只 是 API 
和 代码 风格 不 合 胃 口 ， 所 以 他 开始 试图 创建 另 一 个 框架 , 这 就 是 jQuery。John 现 在 就 职 于 Mozilla， 
他 是 一 位 和 议 的 JavaScript 大 师 ，jQuery 的 开发 在 他 的 领导 下 进展 十 分 顺利 。 在 2006 年 6 月 的 1.0 版 
本 之 后 ,受益 于 社区 的 推动 ,， jQuery 在 接 下 来 的 两 年 发 展 迅猛 。 到 了 2009 年 9 月 ,jQuery 项 目 正 式 
成 立 ， 而 1.4 版 本 已 在 2010 年 1 月 的 代码 狂欢 中 正式 推出 (本 书写 作 时 ，jQuery 的 版 本 是 1.4.2)。 


jQuery 的 主要 目标 是 降低 开发 门槛 。 即 使 用 户 不 了 解 JavaScript (甚至 不 了 解 编程 )， 在 jQuery 
的 帮助 下 ， 也 可 以 通过 简短 的 代码 来 装饰 Web 页 面 。 它 的 API 为 JavaScript 的 常用 操作 提供 了 很 多 
快捷 方式 ， 同 时 也 提供 了 一 些 播 件 〈 它 们 中 的 一 些 已 经 被 归 人 jQuery UI 项 目 ) 以 处 理 其 他 操作 。 
以 至 于 近 些 年 我 一 直 听 到 人 们 把 jQuery 描述 成 “一 种 DOM 操 作 的 DSL”“”， 或 者 是 “jQuery 通过 选 
择 器 来 编码 ， 从 而 使 CSS 的 使 用 者 也 可 以 操作 JavaScript”。 尽 管 这 些 话 并 不 准确 (其 至 有 些 以 偏 
概 全 )， 但 这 些 形容 还 是 抓 住 了 jQuery 的 本 质 。 


jQuery 幕后 的 推动 者 是 它 强大 的 团队 。 除去 插件 项 目 、 核心 、 UI 以 及 网 站 的 那 两 打开 发 人 员 ， 

















O 这 里 的 DSL 指 的 是 领域 特定 语言 ， 详 见 http://en.wikipedia.org/wiki/Domain-specific language。* 
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还 有 半 打 人 通过 会 议 、 活 动 、 会 面 等 各 种 各 样 的 形式 来 扩大 jQuery 社区 ， 这 大 大 推动 了 jQuery 的 
发 展 。 一 些 企 业 也 开始 资助 jQuery， 不 过 这 并 不 影响 jQuery 的 开源 性 质 。jQuery 使 用 GPL/MIT 的 
双重 许可 证 ， 利 用 GitHub 管 理 代码 ， 通 过 Trac 来 进行 bug 报 告 。 

jQuery 项 目 和 jQuery UI 的 周围 围绕 着 大 量 的 杂志 、 会 议 、 会 面 、 用 户 组 以 及 在 线 论坛 。 一 些 
jQuery 书 已 经 出 版 ， 这 包括 jQuery for Dummies®, jQuery in Action? , jQuery: Novice to Ninja 以 及 
jQuery Cookbook, 








正如 我 之 前 所 说 ， 我 认为 jQuery 和 Prototype 所 强调 的 是 不 同 的 需求 集合 。 我 并 不 否认 jQuery 
有 很 多 优点 , 我 也 看 到 jQuery 吸引 了 大 量 的 用 户 ， 比 如 那些 只 是 把 JavaScript 当 成 工具 来 用 的 用 户 
(他 们 可 不 想 为 做 几 个 日 常任 务 就 要 学 习 大 量 的 API)。 jQuery 社区 也 使 jQuery 受益 良 多 , 活跃 的 社 
区 既 让 用 户 对 jQuery 更 有 信心 ， 也 为 用 户 提供 了 更 多 的 支持 。 在 编写 本 书 的 时 候 ，jQuery 的 版 本 
是 1.4.2。 

下 面 是 一 些 你 可 能 需要 的 链接 。 
D jQuery 的 官方 站 点 : http://jquery.com/。 
D jQuery UI 的 官方 站 点 : http://jqueryui.com/。 
O jQuery 的 GitHub 站 点 : http://github.com/jquery/jquery。 
口 Bug 跟 踪 系 统 : http: //dev.jquery.com/, 
口 这 个 地 址 中 列 出 了 jQuery 所 有 的 官方 论坛 ，http://docs.jquery.com/Discussion。 








C.3 MooTools 


MooTools H Valerio Proietti 在 2006 年 编写 的 ， 它 像 一 个 手工 挑选 的 特性 大 杂烩 ， 包 含 了 
Prototype 的 大 部 分 特性 、 一 些 视觉 效果 再 加 上 一 些 领域 特定 的 工具 (cookie 管 理 、 用 来 载 入 Flash 
的 SWFObject 包 装 器 等 )。 它 最 初 的 目标 是 在 保持 代码 紧凑 的 前 提 下 ， 提 供 传统 的 、 基 于 类 的 面 
向 对 象 编程 能 力 (说 实话 ， 在 现在 Google Ajax API、 脚 本 拼接 、gzip 等 技术 大 行 其 道 的 今天 ， 代 
码 紧 次 实 在 不 算 什 么 卖点 ) 。 


MooTools 项 目 被 分 为 MooTools 核心 (框架 本 身 ) 和 MooTools More (也 就 是 插件 库 )。 


MooTools 由 一 个 十 三 人 组 成 的 核心 团队 开发 维护 ， 它 是 一 个 开源 的 项 目 ， 使 用 MIT 许 可 证 ， 
它 在 编写 本 书 时 的 版 本 是 1.2.4, 它 的 代码 寄宿 于 GitHub, 通过 Lighthouse 进 行 bug 追 中 和 功能 变更 ， 




















O 连 这 样 的 书 都 出 版 了 ， 你 可 以 想象 一 下 jQuery 有 多 么 流行 ( 译 者 补充 : for Dummies 是 国外 著名 的 傻瓜 书 系列 ， 详 
见 http://en.wikipedia.org/wiki/For_dummies)。 
© 此 书 中 文 版 《jQuery 实战 》 已 由 人 民 邮 电 出 版 社 出 版 。* 
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而 它 的 支持 则 可 以 在 Google Group 和 一 个 专门 的 论坛 中 获得 。 
MooTools 有 一 本 非常 不 错 的 书 : MooTools Essentials, 


现在 看 起 来 MooTools 在 本 附录 中 所 提 到 的 框架 中 人 气 最 低 。 不 过 在 开发 者 心中 ，MooTools 
仍 占 有 相当 重要 的 地 位 。 
下 面 列 出 了 一 些 你 可 能 需要 的 链接 。 
口 官方 站 点 : http://mootools.net/, 
o 源 代 码 : http://github.com/mootools/mootools-core, 
口 Bug 跟 踪 和 功能 变更 ， https://mootools.lighthouseapp.com/, 
口 你 可 以 在 Google Group ( http://groups.google.com/group/mootools-users ) 和 论坛 
(http://mooforum.net/) 获得 支持 和 项 目 进 展 。http://mootorial.com/ 上 提供 了 一 些 MooTools 
的 资料 和 教程 。 








C.4 YUI 


Yahoo! 用 户 界面 库 ， 一 般 被 称 为 YUT ( 据 我 现在 所 知 ， 它 的 发 音 就 是 逐 字母 念 出 ) ， 它 是 由 
Yahoo! 开 发 者 网 络 (YDN) 所 维护 的 开发 者 资源 中 的 一 部 分 。 这 个 项 目 从 2005 年 开始 ， 到 2006 
年 年 初 完成 了 第 一 个 发 布 版 本 。 它 是 一 个 非常 健壮 的 、 模 块 化 的 和 强大 的 框架 ， 不 过 它 的 和 人 门 学 
习 曲 线 要 稍微 陡峭 一 些 。“YUI3” 包 含 了 YUI 的 核心 JavaScript 功 能 ,此 外 还 有 很 多 额外 的 功能 (不 
一 定 和 JavaScript 相 关 ) 位 于 其 他 的 模块 里 。YUI 被 大 量 应 用 于 Yahoo! 自 己 的 网 站 和 在 线 服务 中 ， 
这 也 是 其 稳定 性 和 高 性 能 的 一 个 实证 。 

要 知道 YUI 的 版 本 2 和 版 本 3 之 间 ， 无 论 是 初始 化 框架 的 方式 ， 还 是 访问 模块 和 特性 的 方法 ， 
都 发 生 了 巨大 的 变化 , 因此 要 小 心 那些 可 能 过 时 的 文档 和 教程 。 一 般 以 YaHoo 开 头 的 调用 都 是 YUl 
2 的 代码 。 不 过 ， 从 YUI 3.1 开 始 你 可 以 集成 那些 老式 的 解决 方案 ， 从 而 使 编码 更 加 轻松 。 


虽然 YUI 的 核心 并 不 算是 开源 的 (尽管 它 有 一 个 BSD 许 可 证 ， 但 实际 上 这 部 分 代码 只 有 
YDN 才 有 权 提 交 )， 不 过 YUI Gallery 允 许 人 们 去 提交 自己 的 模块 。 你 也 可 以 进行 bug 报 告 和 功 
能 请 求 。 

大 多 数 的 YUI 文 档 不 是 在 YUI 框 架 的 官方 站 点 上 ， 就 是 在 YUI 库 的 站 点 上 ， 因 此 它 具 有 很 强 
的 社区 导向 性 。YDN 的 布道 者 Christian Heilmann 编 写 了 一 系列 高 质量 的 文档 ,这 些 文档 遍布 于 流行 
的 Web 开 发 在 线 杂志 ， 包 含 了 上 百 个 循序 渐进 的 示例 。 这 些 文档 的 质量 如 此 之 高 ， 以 至 于 YUI 的 书 
都 显得 多 余 。 我 能 找到 的 最 好 的 YUI 的 书 还 得 追 湖 到 YU ; Learning the Yahoo! User Interface Library, 
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YUI 现 在 相当 流行 。 事实 上 ，YUI 在 那些 富 互 联网 应 用 中 使 用 的 最 多 ， 因 为 对 那些 不 要 求 UI 
的 操作 来 说 , YUI 显 得 过 于 重量 级 了 , Dojo 也 是 如 此 。 从 这 方面 来 说 , YUI 经 常 和 “reset” 和 “grid” 
此 类 YDN 里 的 资源 "被 一 起 使 用 。YUI 社 区 的 活动 以 官方 的 YUI 库 网 站 为 中 心 。 


YUI 有 一 些 相当 不 错 的 “卖点 ”: 


它 的 API 内 聚 性 相当 好 (整个 YUI 的 风格 都 是 一 致 的 )， 

它 得 到 了 大 量 的 测试 ， 并 且 拥 有 大 量 实用 的 文档 ， 

它 对 可 访问 性 (比如 说 ， 对 ARIA 的 支持 ) 作出 了 特别 的 支持 ; 

它 的 模块 化 、 按 需 载 入 的 理念 ， 再 加 上 其 背后 强大 的 CDN， 使 得 它 的 可 用 性 相当 强 (BI 
便 是 在 轻 量 级 的 环境 下 )， 

O 它 由 一 个 大 型 公司 (Yahoo!) 维护 和 支持 ， 因 此 选择 它 的 技术 风险 要 低 得 多 。 


在 满足 需求 的 前 提 下 , 我 认为 你 应 该 优先 选择 那些 轻 量 级 的 库 。 这样 你 可 以 避免 学 习 和 使 用 
那些 不 需要 的 东西 ， 与 此 同时 ， 维 护 和 扩展 也 会 变 得 更 加 容易 。 


下 面 是 你 需要 的 四 个 链接 。 











DO DO D 








OQ 官方 站 点 : http://developer.yahoo.com/yui/3/。 

o 源码 库 : http://github.com/yui, 

O Bug 报 告 和 反馈 http://yuilibrary.com/projects/yui3/report, 
O 社区 资源 : http://yuilibrary.com/。 











C.5 ExtJS 


ExtJS 是 一 套 成 熟 的 RIA" 框 架 ， 它 包含 大 量 华丽 的 、 桌 面 风格 的 UI Widget， 比 如 树 形 视图 
(tree view)、 数 据 表 格 (datagrid) 和 对 话 窗口 。Jack Slocum 在 2006 年 (我 是 这 么 认为 的 ) 开始 开 
发 它 ， 最 初 它 是 作为 Prototype、jQuery 或 是 YUI 的 第 三 方 插 件 存 在 的 。 到 后 来 ，ExtJS 逐 渐 发 展 成 
一 个 以 创建 华丽 的 、 桌 面 风格 的 用 户 界 面 为 目标 的 大 型 独立 框架 ; 比如 ， 它 很 早 就 配备 了 优秀 的 
数据 表格 、 树 形 视图 以 及 Ajax 功能 。 因 此 ， 很 多 人 选择 ExUS 用 来 构建 网 站 管理 页 面 。 

ExtJS 是 与 其 同名 的 公司 旗下 的 产品 , 该 公司 也 提供 其 他 相关 的 工具 : Ext Designer 和 Ext GWT 
bridge。ExtJS 同 时 具有 三 个 许可 证 : GPLv3、OEM 和 商业 许可 证 。ExtUS 许 可 证 的 混乱 曾 在 其 发 
行 时 引起 过 一 阵 骚 动 ， 因 为 GPLv3 使 得 它 不 能 被 任何 非 GPL 开 源 项 目 使 用 。 男 一 方面 ， 你 可 以 从 




















® + YWhttp://developer.yahoo.com/yui/reset/Fhttp://developer.yahoo.com/yui/grids/, * 
© 这 里 RIA 指 的 是 富 互 联网 应 用 ， 详 见 http://en.wikipedia.org/wiki/Rich Internet Application。* 
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该 库 的 创始 者 那里 得 到 ExtJS 官 方 的 商业 技术 支持 、 培 训 以 及 订阅 。 很 遗憾 ，ExtJS 的 源码 库 已 经 
BRAT, 现在 只 能 从 某 个 下 载 页 的 快照 上 访问 到 它 。 此 外 我 也 没有 发 现 ExUS 有 什么 像样 的 Bug 
跟踪 系统 ， 总 之 ， 除 了 GPLv3 这 个 选项 以 外 ，ExtJS 看 起 来 并 不 怎么 开放 。 

和 其 他 优秀 的 项 目 一 样 ，ExUS 背 后 有 一 群 全 职 的 、 积 极 的 员工 来 推动 它 的 发 展 。 在 编写 本 
书 时 ，ExHUS 的 版 本 是 3.1.1， 在 2010 年 它 可 能 还 会 发 布 儿 个 新 的 主 版 本 。 

ExtJS 的 文档 相当 不 错 ， 也 便于 浏览 ， 就 是 有 些 太 过 简洁 了 ， 与 此 同时 ，ExtJS 的 API 参 考 配 


备 了 完整 的 应 用 实例 。 此 外 也 有 不 少 不 错 的 ExtJS 书 ， 其 中 最 出 名 的 要 数 2009 年 出 版 的 ExtJS 3.0 
Cookbook， 以 及 2010 年 夏 出 版 的 ExtJS in Action, 








最 后 ， 由 于 ExtJS 项 目 专 属于 ExtJS 公 司 ， 因 此 它 的 生态 系统 被 局 限 在 官方 站 点 、 论 坛 以 及 一 
个 基于 维基 系统 的 学 习 中 心 (提供 演 示 、 录 像 、 教 程 等 学 习 资 料 )。 
下 面 是 你 使 用 ExtJS 所 不 可 或 缺 的 链接 。 
口 官方 站 点 : http://extjs.com/。 
O 下 载 地 址 : http://www.extjs.com/products/extjs/download.php, 
O 官方 论坛 : http:/www.extjs.com/forum/。 
O 学 习 中 心 : http:/www.extjs.com/learn/Main_Page。 





C.6 Dojo 





看 了 那么 多 的 JavaScript 流 行 框架 , 最 后 在 这 里 介绍 一 下 Dojo。Dojo 项 目 于 2004 年 开始 , 经 过 
Alex Russell, Dylan Schiemann 和 David Schontzler 的 不 懈 努 力 ， 于 2007 年 11 月 5 日 发 布 了 1.0 正 式 版 
本 。Dojo 项 目 由 Dojo (核心 部 分 )、Dijit (UI Widget) 以 及 DojoX (插件 和 扩展 功能 ) 组 成 。 


Dojo 在 很 多 方面 上 和 ExtJS 很 相似 。 它 是 一 个 主流 的 RIA 框 架 ， 并 拥有 强大 的 公司 作为 后 盾 。 
Dojo 项 目 现在 由 Dojo 基 金 会 (赞助 公司 包括 IBM、 Google, AOL, Thomson Reuters, TIBCO, Zend, 
Sitepen 等 ) 所 支持 。 它 当前 (编写 本 书 时 ) 的 版 本 是 1.5.0。 和 ExtJS 不 同 的 是 ，Dojo 是 一 个 真正 
的 开源 项 目 ， 它 同时 具有 学 术 用 自由 许可 证 (Academic Free License 2.1) 和 新 版 BSD 许 可 证 。 
GitHub 、Subversion 以 及 Bazaar 上 都 有 Dojo 的 代码 库 ， 同 时 ， 它 还 拥有 一 个 在 线 Bug 跟 踪 系 统 。 


Dojo 和 Dojo 基 金 会 下 的 其 他 项 目 关系 也 很 密切 ， 这 些 项 目 中 最 有 名 的 要 数 cometD 和 DWR， 
它们 很 早 就 发 布 了 ， 现 在 仍然 被 广泛 应 用 于 服务 器 向 浏览 器 的 自动 推送 服务 〈 不 要 忘 了 Sizzle、 


Persevere 以 及 General Interface), 








O ExtJS 拥 有 一 个 六 人 的 管理 团队 ， 以 及 一 个 人 员 数 量 未 知 的 全 职 开 发 团队 。 
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各 大 Web 开 发 会 议 中 都 能 看 到 Dojo 的 身影 IT 恤 衫 、 短 会 、 小 聚 以 及 优秀 的 作品 ) ， 同 时 它 还 
拥有 一 个 活跃 的 社区 和 专门 的 论坛 。 随 着 社区 力量 的 强大 , Dojo 有 可 能 会 成 为 第 二 个 jQuery。 Dojo 
有 不 少 不 错 的 书 ， 其 中 包括 Mastering Dojo”, Dojo: the Definitive Guide”, Practical Dojo Projects 
以 及 刚 出 版 不 久 的 Getting StartED with Dojo, 





Dojo 提 供 了 非常 优秀 的 在 线 文档 ， 其 中 包含 快速 使 用 指南 、 参 考 指南 以 及 API 文 档 ， 此 外 还 
有 一 系列 面向 任务 的 “常用 解决 方案 ”( 例 如 ，“ 通 过 数据 集 创建 图 表 ”)。 




















我 个 人 认为 ， 如 果 你 需要 创建 符合 Web 标 准 的 、RIA 式 的 、 桌 面 风 格 的 应 用 ，Dojo 是 你 的 首 
要 选择 。 
作为 本 篇 附录 的 结束 ， 下 面 列 出 了 与 Dojo 相 关 的 重要 链接 。 
OQ 官方 站 点 : http://www.dojotoolkit.org/, 
O 源码 地 址 : http://svn.dojotoolkit.org/sre/ (可 异 不 是 Git)。 
口 Bug 跟 踪 和 报告 系统 : http://bugs.dojotoolkit.org/。 


O 社区 论坛 : http://www.dojotoolkit.org/community/。 

















O 此 书 中 文 版 《精通 Dojo》 已 由 人 民 邮 电 出 版 社 出 版 。* 
@ 此 书 中 文 版 《Dojo 权 威 指南 》 已 由 机 械 工业 出 版 社 出 版 。* 
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我 当然 希望 这 本 书 会 对 你 有 用 。 不 过 ， 你 仍然 需要 去 自己 动手 寻找 问题 的 答案 ， 或 是 寻求 他 
人 的 指点 以 确保 自己 没 走 错 路 。 问 题 在 于 ， 在 哪里 可 以 得 到 帮助 ， 或 是 得 到 他 人 的 指点 呢 ? 


D.1 JavaScript 求助 指南 


即便 存在 大 量 优秀 的 JavaScript 框 架 ， 这 也 不 能 成 为 你 不 了 解 JavaScript 的 借口 。 而 且 有 时 你 
确实 需要 动手 编写 一 些 代 码 , 比如 说 由 于 一 些 原因 而 不 能 使 用 你 常用 的 框架 (比如 移动 设备 上 的 
性 能 限制 ”)。 

新 闻 组 

还 记得 在 宽带 出 现 前 人 们 都 在 用 什么 吗 ? 还 记得 在 Google Group 之 前 人 们 在 用 什么 吗 ? 还 
记得 Google 出 现 前 人 们 在 用 什么 吗 ? 好 吧 ， 也 许 你 在 那 时 还 没有 开始 编 代 码 ， 那 时 我 们 用 的 是 
Usenet”。 它 现在 仍然 陪伴 在 开发 者 身边 ， 新 一 代 的 开发 者 已 经 发 现 了 它 的 种 种 好 处 ， 比 如 说 共 
享 二 进 制 文件 。 除 此 之 外 ， 它 还 拥有 我 们 所 知 的 所 有 编程 语言 的 新 闻 组 。 

你 可 以 在 ISP 签 订 的 网 络 服务 协议 中 找到 一 个 称 之 为 NNTP" 服 务 器 的 东西 , 这 就 是 ISP 提 供 的 
新 闻 组 接 入 服务 。 大 多 数 的 新 闻 聚 合 器 (aggregator)、 源 阅读 器 (feed reader) 以 及 电子 邮件 客 
户 端 (包括 Thunderbird、Entourage、Outlook 以 及 Outlook Express) 都 允许 你 连接 一 个 NTTP 服 务 
器 ， 然 后 订阅 你 需要 的 新 闻 组 (根据 ISP 的 不 同 ， 可 选 的 新 闻 组 也 会 有 所 差异 ) 。 

见鬼 ， 这样 访 问 新 闻 组 也 太 麻 烦 了 ， 好 在 Google Group 维持 了 不 少 实用 新 闻 组 的 代理 。 
































O 在 这 方面 ， 你 可 以 试 试 Thomas Fuchs 刚 刚 发 布 的 Zzepto.js: http://github.com/madrobby/zepto, 或 者 是 更 快 的 vapor.js: 
http://github.com/madrobby/vapor.js。 

D 又 称 新 闻 讨 论 组 ， 它 是 Uses Network 的 缩写 。 它 是 Intemet 上 信息 传播 的 一 个 重要 组 成 部 分 ， 也 是 Internet 上 一 种 高 
效率 的 交流 方式 。* 

© 即 网 络 新 闻 传输 协议 ， 它 主要 用 于 阅读 和 张贴 新 闻 文章 到 Usenet。* 
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口 comp.1lang.javascript 是 JavaScript 的 核心 新 闻 组 (这 个 地 址 是 COMPuter LANGuage 
JavaScript 的 缩写 ) 。 它 具有 相当 长 的 历史 ， 现 在 ， 它 仍然 是 JavaScript 语 言 的 主要 讨论 区 。 
在 这 里 你 会 遇 到 各 种 各 样 的 参与 者 ， 他 们 中 既 有 一 无 所 知 的 新 手 ， 也 有 令 人 尊敬 的 大 师 。 

O 你 也 可 以 在 一 些 非 英语 的 子 新 闻 组 中 进行 讨论 ， 比 如 japan.comp.1lang.javascript、 


de.comp.lang.javascript、fr.comp.lang.javascript 等 。 
邮件 列表 和 论坛 
现在 有 大 量 的 JavaScript 论 坛 ,根据 发 帖 者 水 平 的 不 同 , 这 些 论坛 的 质量 也 参差 不 齐 。 要 离 那 
些 动 辑 粘 贴 复制 代码 的 论坛 远 些 ， 那 是 论坛 风气 的 一 个 不 良 表现 。 


OQ Google Group 维持 了 我 刚才 提 到 的 JavaScript 新 闻 组 的 代理 ， 你 可 以 先 到 那里 看 看 " 。 
O Sitepoint 是 一 个 相当 不 错 的 站 点 ， 它 们 的 JavaScript 论 坛 值得 一 去 ”。 
口 Webdeveloper 站 点 有 各 种 各 样 的 活动 ”。 


总 之 ， 优 先 考 虑 第 一 个 选择 Google 提供 的 新 闻 组 代理 )。 那 里 的 帖子 质量 非常 高 。 




















IRC 频道 

啊 ，IRC。 这 是 另 一 个 老 古董 了 ， 这 里 之 所 以 提 到 它 ， 是 因为 它 提供 了 即时 交流 的 功能 。 男 
一 方面 ， 它 的 实用 程度 取决 于 你 登录 时 有 多 少 个 高 手 在 线 。 

irc.freenodqe.net 上 的 主要 频道 是 ##JavaScript。 它 一 般 都 会 有 300 到 400 人 同时 在 线 。 如 
果 你 多 往 竹 的 话 ， 可 能 会 发 现 一 些 不 错 的 非 英 语 频 道 。 

进一步 阅读 

现在 有 大 量 的 JavaScript 权 威 书 。 我 已 经 在 参考 书目 中 列 出 了 不 少 书目 , 在 这 里 我 重点 挑 出 了 
几 本 。 


Q David Flanagan 编 写 的 JavaScript: The Definitive Guides 是 公认 的 JavaScript 圣 经 ， 比 较 搞 笑 
的 是 ， 确 实 有 一 本 书 名 叫 “JavaScript 圣 经 "” ， 它 就 是 Danny Goodman iy 5 HY JavaScript 
Bible”， 由 Brendan Eich 作 序 ( 它 的 第 7 版 就 快 出 版 了 )。 














O 参见 http://groups.google.com/group/comp.lang.javascript。 

© #Whttp://www.sitepoint.com/forums/forumdisplay.php?f=15, 

© 参见 http:/www.webdeveloper.com/forum/forumdisplay.php?forumid=3。 

@ IRC 是 Internet Relay Chat 的 英文 缩写 ， 详 见 http://en.wikipedia.org/wiki/IRC。* 
© 此 书 中 文 版 《JavaScript 权 威 指南 》， 已 由 机 械 工业 出 版 社 出 版 。* 

© 此 书 中 文 版 《JavaScript 宝 典 》， 已 由 人 民 邮 电 出 版 社 出 版 。* 

© JavaScript 语 言 的 创始 人 。* 
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Q Douglas Crockford (JSON 和 JSLint 的 创始 人 ) 编写 的 JavaScript: The GoodParts 也 很 值得 
一 看 ，Doug 在 此 书 中 不 断 提 醒 我 们 JavaScript 中 三 分 之 二 的 内 容 都 不 应 被 使 用 (E). 

D jQuery 的 创始 人 John Resig 最 近 在 Sitepoint 上 编写 了 一 本 看 似 不 错 的 小 册子 : Secrets of the 
JavaScript Ninja, 

O 接 下 来 ， 这 本 书 仍然 来 自 Sitepoint， 虽 然 有 些 过 时 ， 但 仍然 是 一 本 好 书 ， 它 由 多 个 作者 合 
著 而 成 ， 这 就 是 The Art and Science of JavaScript’ . 

QO 非凡 的 JavaScript 传 道 者 Chris Heilmann 编 写 的 Beginning Java-Script with DOM Scripting and 
Ajax: From Novice to Professional 也 是 值得 一 读 的 佳作 。 

a 此 外 ， 一定 不 要 忘 了 Thomas Fuchs 和 Amy Hoy 最 近 合 写 的 一 本 书 : JavaScript Performance 
Rocks /。 这 本 书 对 如 何 调 优 JavaScript 性 能 有 着 出 色 的 讲解 。 


D.2 框架 的 帮助 资源 
这 部 分 把 分 散在 附录 C 中 的 一 些 在 线 资源 整合 在 了 一 起 。 














Prototype 和 script.aculo.us 

口 官方 支持 列表 : http://groups.google.com/group/prototype-scriptaculous。 
O 在 线 API 文 档 : http://api.prototypejs.org/。 
http://wiki.github.com/madrobby/scriptaculous/。 

口 [RC 频道 ， Freenode 上 的 #prototype 和 #scriptaculous 频 道 。 


参考 书 : 








Q Practical Prototype and script.aculo.us， 由 Andrew Dupont 编 写 。 
Q Prototype and script.aculo.us， 由 本 书 作者 编写 。 








jQuery 


OQ 官方 论坛 ， http://forum.jquery.com/。 

OQ 教程 : http://docs.jquery.com/Tutorials。 

QO API 文 档 : http://docs.jquery.com/Main Page, 
QO IRC 频 道 : Freenode 上 的 村 query 频 道 。 












































O 此 书 中 文 版 《JavaScript 语 言 精粹 》， 已 由 电子 工业 出 版 社 出 版 。* 
@ 此 书 中 文 版 《JavaScript 艺 术 与 科学 》 已 由 电子 工业 出 版 社 
































O jQuery for Dummies, HLynn Beighley 编 写 。 

QO jQuery in Action, (HBear Bibault 和 Yehuda Kata 编 写 。 

QO jQuery: Novice to Ninja, (Earle Castledine 和 Craig Sharkie 编 写 。 
Q jQuery Cookbook, ACody Lindley 编 写 。 





MooTools 


O 官方 支持 列表 : http://groups.google.com/group/mootools-users , 
QO 论坛 : http:/mooforum.net/。 

a 教程 : http:/mootorial.comy 。 

口 API 文 档 : http://mootools.net/docs/core, 


参考 书 : 


Q MooTools Essentials， 由 Aaron Newton 编 写 。 





YUI 


QO 论坛 : http://yuilibrary.com/forum/。 
a 文档 : http://developer.yahoo.com/yui/3/。 
D IRC 频 道 ， Freenode 上 的 # ”频道 (尽管 并 不 是 很 活跃 )。 


参考 书 : 











口 Learning the Yahoo! User Interface Library， 由 Dan Wellman 编 写 。 
ExtJS 


O 论坛 : http:/www.extjs.com/forum/。 

O 实例 演示 : http://www.extjs.com/deploy/dev/examples/, 

O API 文 档 : http:/www.extjs.com/deploy/dev/docs/。 

QO 学 习 中 心 : http:/Avww.extjs.com/learn/Main Page, 

DJIRC 频 道 : Freenode 上 的 #extjs 频 道 (尽管 并 不 是 很 活跃 )。 


参考 书 : 


OQ ExtJS 3.0 Cookbook， 由 Jorge Ramon 编 写 。 
Q ExtJS in Action， 由 Jesus Garcia 编 写 。 
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Dojo 


QO 论坛 : http://www.dojotoolkit.org/community/, 
O API 文档 和 教程 : http://www.dojotoolkit.org/documentation。 
o [RC 频道 Freenode 上 的 #4dojo 频 道 。 


参考 书 : 


Q Mastering Dojo， 由 Craig Riecke、Rawld Gill 和 Alex Russell 编 写 。 
Q Dojo: the Definitive Guide， 由 Matthew A. Russell 编 写 。 
Q Practical Dojo Projects ， 由 Frank Zammetti 编 写 。 








附录 D 求助 指南 


我 当然 希望 这 本 书 会 对 你 有 用 。 不 过 ,你 仍然 需要 去 自己 动手 寻找 问题 的 答案 ， 或 是 寻求 他 


人 的 指点 以 确保 自己 没 走 错 路 。 问 题 在 于 ,在 哪里 可 以 得 到 帮助 ， 或 是 得 到 他 人 的 指点 呢 ? 


D.1 JavaScript 求助 指南 


即便 存在 大 量 优秀 的 JavaScript 框 架 ， 这 也 不 能 成 为 你 不 了 解 JavaScript 的 借口 。 而 且 有 时 你 
确实 需要 动手 编写 一 些 代 码 ,比如 说 由 于 一 些 原 因而 不 能 使 用 你 常用 的 框架 ( 比如 移动 设备 上 的 
性 能 限制 2 ) 

新 闻 组 

还 记得 在 宽带 出 现 前 人 们 都 在 用 什么 吗 ? 还 记得 在 Google Group 之 前 人 们 在 用 什么 吗 ? 还 
记得 Google 出 现 前 人 们 在 用 什么 吗 ? 好 吧 ， 也 许 你 在 那 时 还 没有 开始 编 代码 ， 那 时 我 们 用 的 是 
Usenet®。 它 现在 仍然 陪伴 在 开发 者 身边 ， 新 一 代 的 开发 者 已 经 发 现 了 它 的 种 种 好 处 ， 上 比如 说 共 
享 二 进 制 文件 。 除 此 之 外 ， 它 还 拥有 我 们 所 知 的 所 有 编程 语言 的 新 闻 组 。 


你 可 以 在 ISP 签 订 的 网 络 服务 协议 中 找到 一 个 称 之 为 NNTPS 服 务 器 的 东西 ， 这 就 是 ISP 提 供 
的 新 闻 组 接 人 服务 。 大 多 数 的 新 闻 聚 合 器 (aggregator )、 源 阅读 器 (feed reader ) 以 及 电子 邮件 





Q@ 在 这 方面 , 你 可 以 试 试 Thomas Fuchs 刚 刚 发 布 的 zepto.js : http://github.com/madrobby/zepto , 或 者 是 更 快 的 vaporjs : 
http://github.com/madrobby/vapor.jso 

@ 又 称 新 闻 讨 论 组 ， 它 是 Uses Network 的 缩写 。 它 是 Internet 上 信息 传播 的 一 个 重要 组 成 部 分 ,也 是 Internet 上 一 种 高 
效率 的 交流 方式 。* 

@ 即 网 络 新 闻 传输 协议 ， 它 主要 用 于 阅读 和 张贴 新 闻 文章 到 Usenet。* 


附录 D 求助 指南 A 113 


客户 端 ( 包括 Thunderbird、Entourage、Outlook 以 及 Outlook Express ) 都 允许 你 连接 一 个 NTTP 服 
务 器 ， 然 后 订阅 你 需要 的 新 闻 组 ( 根据 ISP 的 不 同 ， 可 选 的 新 闻 组 也 会 有 所 差异 b 


见鬼 , 这 样 访问 新 闻 组 也 太 麻 烦 了 ,好 在 Google Group 维持 了 不 少 实用 新 闻 组 的 代理 。 

O comp.lang.javascript 是 JavaScript 的 核心 新 闻 组 ( 这 个 地 址 是 COMPuter LANGuage 
JavaScript 的 缩写 它 具 有 相当 长 的 历史 ,现在 ， 它 仍然 是 JavaScript 语 言 的 主要 讨论 区 。 
在 这 里 你 会 遇 到 各 种 各 样 的 参与 者 ， 他 们 中 既 有 一 无 所 知 的 新 手 ， 也 有 售 人 尊敬 的 大 师 。 

O 你 也 可 以 在 一 些 非 英语 的 子 新 闻 组 中 进行 讨论 ,比如 japan.comp.1lang.javascript、 
de.comp.lang. javascript、fr.comp.lang.javascript 等 。 


邮件 列表 和 论坛 


现在 有 大 量 的 JavaScript 论 坛 ,根据 发 帖 者 水 平 的 不 同 ,这 些 论坛 的 质量 也 参差 不 齐 。 要 离 那 
些 动 加 粘贴 复制 代码 的 论坛 远 些 ， 那 是 论坛 风气 的 一 个 不 良 表 现 。 
a Google Group 维 持 了 我 刚才 提 到 的 JavaScript 新 闻 组 的 代理 ,你 可 以 先 到 那里 看 看 3。 


O Sitepoint 是 一 个 相当 不 错 的 站 点 ， 它 们 的 JavaScript 论 坛 值得 一 去 2。 





a Webdeveloper 站 点 有 各 种 各 样 的 活动 0。 


总 之 ， 优 先 考虑 第 一 个 选择 ( Google 提 供 的 新 闻 组 代理 > 那里 的 帖子 质量 非常 高 。 





© SWhttp://groups.google.com/group/comp.lang.javascripte 
@ SB Ahttp://www.sitepoint.com/forums/forumdisplay.php?f=150 
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IRC2 频道 
啊 , IRC。 这 是 另 一 个 老 古 董 了 ， 这 里 之 所 以 提 到 它 ， 是 因为 它 提供 了 即时 交流 的 功能 。 另 


一 方面 , 它 的 实用 程度 取决 于 你 登录 时 有 多 少 个 高 手 在 线 。 


irc. freenode .net 上 的 主要 频道 是 ##Javascript。 它 一 般 都 会 有 300 到 400 人 同时 在 线 。 如 
果 你 多 和 逛 逛 的 话 ， 可 能 会 发 现 一 些 不 错 的 非 英 语 频道 。 

进一步 阅读 

现在 有 大 量 的 JavaScript 权 威 书 。 我 已 经 在 参考 书目 中 列 出 了 不 少 书目 ,在 这 里 我 重点 挑 出 了 


几 本 。 


Q David Flanagan 编 写 的 JavaScript: The Definitive Guide 9 是 公认 的 JavaScript 圣 经 ， 上 比较 搞笑 
的 是 ， 确实 有 一 本 书 名 叫 “ JavaScript 圣 经 ”, 它 就 是 Danny Goodman 编 写 的 JavaScript 
Bible® , 由 Brendan Eich@ 作 序 ( 它 的 第 7 版 就 快 出 版 了 b 

口 Douglas Crockford ( JSON 和 JSLint 的 创始 人 ) 编写 的 JavaScript: The GoodParts9 也 很 值得 


一 看 ,Doug 在 此 书 中 不 断 提醒 我 们 JavaScript 中 三 分 之 二 的 内 容 都 不 应 被 使 用 ( 笑 % 





© 参见 http://www.webdeveloper.com/forum/forumdisplay.php?forumid=3。 

© IRC 是 Internet Relay Chat 的 英文 缩写 ， 详 见 http:/en.wikipedia.org/wiki/IRC。* 
@ 此 书 中 文 版 《JavaScript 权 威 指南 》, 已 由 机 械 工业 出 版 社 出 版 。* 

@ 此 书 中 文 版 《JavaScript 宝 典 》, 已 由 人 民 邮 电 出 版 社 出 版 。* 

© JavaScript 语 言 的 创始 人 。* 

© 此 书 中 文 版 《JavaScript 语 言 精 粹 》, 已 由 电子 工业 出 版 社 出 版 。* 
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O jQuery 的 创始 人 John Resig 最 近 在 Sitepoint 上 编写 了 一 本 看 似 不 错 的 小 册子 : Secrets of the 


JavaScript Ninjas 


O 接 下 来 ， 这 本 书 仍然 来 自 Sitepoint ,虽然 有 些 过 时 ， 但 仍然 是 一 本 好 书 ， 它 由 多 个 作者 合 


车 而 成 ， 这 就 是 The Art and Science of JavaScript®?。 


QO 非凡 的 JavaScript 传 道 者 Chris Heilmann 编 写 的 Beginning Java-Script with DOM Scripting and 


Ajax: From Novice to Professional 也 是 值得 一 读 的 佳作 。 


O 此 外 ， 一 定 不 要 忘 了 Thomas Fuchs 和 Amy Hoy 最 近 合 写 的 一 本 书 : JavaScript Performance 


Rocks 4 这 本 书 对 如 何 调 优 JavaScript 性 能 有 着 出 色 的 讲解 。 


D.2 框架 的 帮助 资源 


这 部 分 把 分 散在 附录 C 中 的 一 些 在 线 资 源 整 合 在 了 一 起 。 
Prototype 和 和 script.aculo.us 


口 官方 支持 列表 : http://groups.google.com/group/prototype-scriptaculous。 





O 在 线 API 文 档 : http://api.prototypejs.org/, 


http://wiki.github.com/madrobby/scriptaculous/。 


QO [RC 频道 : Freenode 上 的 #prototype 和 #scriptaculous 频 道 。 





O 此 书 中 文 版 《JavaScript 艺 术 与 科学 》 已 由 电子 工业 出 版 社 出 版 。* 
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Q Practical Prototype and script.aculo.us ,由 Andrew Dupont 编 写 。 





Q Prototype and script.aculo.us ,由 本 书 作 者 编写 。 


jQuery 


OQ 官方 论坛 http://forum.jquery.com/, 


QO 教程 : http://docs.jquery.com/Tutorials, 


口 API 文 档 : http://docs.jquery.com/Main_Page。 





QO [RC 频道 : Freenode 上 的 #jquery 频 道 。 


口 jQuery for Dummies , 由 Lynn Beighley 编 写 。 
O jQuery in Action ,由 Bear Bibault 和 Yehuda Kata 编 写 。 
由 Earle Castledine 和 Craig Sharkie 编 写 。 


Q jQuery: Novice to Ninja 





Q jQuery Cookbook , 由 Cody Lindley 编 写 。 


MooTools 


O 官方 支持 列表 : http://groups.google.com/group/mootools-users o 


a 论坛 : http://mooforum.net/, 


O 教程 : http://mootorial.com/。 





口 API 文 档 : http://mootools.net/docs/core, 


Q MooTools Essentials ,由 Aaron Newton 编 写 。 


YUI 


口 论坛 http://yuilibrary.com/forum/, 


a 文档 : http://developer.yahoo.com/yui/3/。 





O IRC 频 道 : Freenode 上 的 困 ui 频 道 ( 尽管 并 不 是 很 活跃 b 


参考 书 : 


Q Learning the Yahoo! User Interface Library , 由 Dan Wellman 编 写 。 
ExtJS 


O 论坛 http://www.extjs.com/forum/, 


O 实例 演示 : http://www.extjs.com/deploy/dev/examples/, 





口 API 文 档 : http://www.extjs.com/deploy/dev/docs/, 
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n 学 习 中 心 : http:/www.extjs.com/learn/Main_Page。 





a IRC 频 道 : Freenode 上 的 #ext js 频道 ( 尽管 并 不 是 很 活跃 b 


参考 书 : 


Q ExtJS 3.0 Cookbook , FAJorge Ramon 编 写 。 





Q ExtJS in Action ,由 Jesus Garcia 编 写 。 


Dojo 


QO 论坛 : http://www.dojotoolkit.org/community/, 


口 API 文 档 和 教程 http://www.dojotoolkit.org/documentation, 





QO [RC 频道 : Freenode 上 的 #dojo 频 道 。 


参考 书 : 


Q Mastering Dojo ,由 Craig Riecke, Rawld Gill 和 Alex Russell 编 写 。 


Q Dojo: the Definitive Guide ,由 Matthew A. Russell 编 写 。 





Q Practical Dojo Projects , FAFrank Zammetti 编 写 。 
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“真希 望 我 初学 JavaScript 那 会 儿 就 有 这 本 书 ! 本 书 会 让 你 在 现实 的 JavaScript 世 界 中 游 九 有余 。 它 既 讲述 了 当今 流行 的 
JavaScript 库 的 运行 原理 ， 也 提供 了 JavaScript 正 确实 践 的 好 建议 和 背景 资料 。 作 为 最 优秀 的 JavaScript 开 发 者 之 一 ， 作 者 将 他 多 
年 的 宝贵 经 验 凝 聚 在 本 书 中 ， 使 它 成 为 日 常 JavaScript 开 发 中 的 必 读 参考 。” 

一 一 Thomas Fuchs，script.aculo.us 框 架 创 始 人 


“这 本 书包 含 了 一 系列 当今 浏览 器 中 既 精 妙 又 实用 的 JavaScript 贴 士 和 技巧 ， 既 有 表单 验证 和 JSON 处 理 这 样 的 基本 技术 ， 也 
有 混搭 和 几何 定位 这 样 的 应 用 实例 。 如 果 你 想 使 用 JavaScript 编 写 更 优秀 的 Web 应 用 ， 我 强烈 建议 你 阅读 本 书 。?” 
一 一 Dylan Schiemann，SitePen 的 CEO，Dojo 工 具 箱 联合 创始 人 


Pragmatic Guide to JavaScript 


JavaScript 修 炼 之 道 


JavaScript 已 无 处 不 在 。 在 当今 纷繁 复杂 的 网 络 世界 中 ， 它 是 不 可 或 缺 的 组 成 部 分 。 然 而 ， 即 便 对 有 经 验 的 开发 人 员 而 言 ， 
JavaScript 的 体系 都 像 难 以 穿越 的 生态 环境 系统 。 为 此 ， 本 书 以 有 别 于 一 般 教 程 的 任务 驱动 方式 来 组 织 ， 围 绕 35 个 必 会 的 关键 
JavaScript 任 务 进行 论述 ， 并 针对 常见 任务 提出 了 一 些 新 的 开发 方法 ， 再 加 上 本 书 独特 的 左 页 原理 右 页 代码 的 编排 方式 ， 使 你 在 阅 
读 过 程 中 快速 地 获得 提升 。 

在 本 书 中 ， 作 者 将 教会 你 基本 原理 、 最 便利 的 工具 以 及 业内 最 佳 实践 ， 同 时 也 能 帮 你 简化 编程 模型 ， 适 应 更 加 复杂 的 交互 需 
求 ， 提 升 用 户 在 客户 端的 浏览 体验 。 

如 果 你 熟悉 其 他 任何 语言 编程 ， 那 么 通过 本 书 掌握 JavaScript 将 易如反掌 。 





8 左 页 原理 右 页 代码 ， 极 速 修炼 Web 开 发 秘技 
B 专注 于 浏览 器 端 脚本 编程 ， 提 供 快速 的 解决 方案 
B 任务 驱动 ， 以 实战 掌握 JavaScript 全 和 殊 
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